浏览器兼容问题

时间:2020-05-01

css兼容性问题

①不同浏览器的标签默认的外边距和内边距不同,解决方案:用通配符*来设置各个标签的内外边距是0(即设置margin和padding为0);

②div的垂直居中问题 vertical-align:middle;文字居中:将行距增加到和整个div一样,高line-height=行高;

③margin加倍问题:设置为float的div在ie下的margin会加倍。解决方案:为这个div设置样式:display:inline; 

js兼容性问题

①在标准的事件绑定中绑定事件的方法函数为addEventListener,而IE使用的是attachEvent;

target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture);
target.addEventListener(type, listener, useCapture, wantsUntrusted  );  // Gecko/Mozilla only

对于 Internet Explorer 来说,在IE 9之前,你必须使用 attachEvent 而不是使用标准方法 addEventListener。为了支持IE,前面的例子需要改成这样:

if (el.addEventListener) {
  el.addEventListener('click', modifyText, false); 
} else if (el.attachEvent)  {
  el.attachEvent('onclick', modifyText);
}

②事件处理中event属性的获取不同。标准浏览器是作为参数带入,然后通过e.target获取目标元素;而IE是通过window.event方式获得,通过e.srcElement获取目标元素;

使用 attachEvent 方法有个缺点,this 的值会变成 window 对象的引用而不是触发事件的元素。