浏览器兼容性问题整理

一：不同浏览器的标签默认的外边距和内边距不同。

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

解决方案：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外边距为0。

二：块属性标签float后，又有横向的margin情况下，在IE6中显示的margin比设置的大。

问题症状: 常见症状是IE6中后面的一块被顶到下一行。

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性。

三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度。

问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度。

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

备注：出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

四：图片默认有间距。

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

解决方案：使用float属性为img布局或者删除img之间的回车键

五：标签最低高度设置min-height不兼容。

问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容。

解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：
{
   min-height:200px;
   height:auto !important;
   height:200px; 
   overflow:visible;
}

六：如果图片加a标签在IE9-中会有边框

解决方案：
img{
  border:none;
}

七： rgba不支持IE8。

: 可以用 opacity 代码如下：

{
  opacity:0.7;/*FF chrome safari opera*/ 
  filter:alpha(opacity:70);/*用了ie滤镜,可以兼容ie*/
}
/* 注意: opacity会影响里面元素的透明度 */

八：事件event对象相关兼容性问题。

解决方案 :

//原生js获取事件对象兼容性写法:
dom.onclick = function (event){
    var evt = event || window.event;
}

九：阻止默认事件。

兼容性写法：

//js阻止默认事件
    document.onclick=function(e){
        var e=e||window.event;
        if (e.preventDefault) {
            e.preventDefault();//W3C标准
        }else{
            e.returnValue='false';//IE..
        }
    }

十：阻止事件冒泡。

兼容性写法：

//js阻止事件传播
    document.onclick=function(e){
        var e=e||window.event;
        if (e.stopPropagation) {
            e.stopPropagation();//W3C标准
        }else{
            e.cancelBubble=true;//IE....
        }
    }

十一：监听事件。

兼容性写法：

// 这里使用click事件为例
//添加监听事件
obj.addEventListener('click',fn,false);//非IE
obj.attachEvent('onclick',fn);// IE
// 删除监听事件
obj.removeEventListener('click',fn,false);//非IE
obj.detachEvent('onclick',fn);//IE

持续更新。。。

浏览器兼容性问题整理

猜你喜欢