【前端】浏览器兼容问题及其解决方案

问题一：在不加样式控制的情况下，标签默认的外补丁(margin)和内补丁(padding)不同

解决方案: CSS设置 *{ margin:0; padding:0; }

问题二：块级属性标签 float 之后，如果有左右 margin，那么在 IE6 中显示的 margin 比设置的大

解决方案: 在float的标签样式中加入 { display: inline; }, 将其转化为行内属性

问题三：行内属性标签，在设置 display:block 之后，如果采用 float 布局，同时又有左右 margin 的情况下，那么在 IE6 中显示的间距有 bug

解决方案: 在 { display:block; } 后面加入 { display:inline; display:table; }

问题四：如果给标签设置较小的高度（一般小于10px），那么在IE6，IE7和遨游中这个标签的高度会超出你设置的高度

在IE6、IE7和遨游中，这个标签的高度不受你设置的高度的控制，它会达到默认的行高。这是因为 IE8 之前的浏览器都会给标签一个最小默认的行高的高度，即使标签是空的，这个标签的高度还是会达到默认的行高。

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

问题五：如果给标签设置最低高度 min-height，会出现不兼容的情况

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

问题六：图片之间默认有间距

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

解决方案: 将 img 设置为 float 属性

问题七：格式为PNG24的图片在IE6浏览器上会出现背景

解决方案：把图片改成 PNG8 格式

问题八：设置透明度（兼容所有浏览器）

.tran_class {   
    filter: alpha(opacity=50); // IE浏览器 (trident内核)
    -moz-opacity: 0.5;  // 老版Mozilla firefox (gecko内核) 
    -khtml-opacity: 0.5;   // 老版Safari (webkit内核)
    opacity: 0.5;   // 支持opacity的所有浏览器，如：Chrome (Blink内核)、opera (以前是presto内核，现在改用google chrome的Blink内核)
}

问题九： IE6，IE7中 ol 的序号全为1，不递增

解决方案: li设置样式 { display: list-item }

问题十： IE6，IE7不支持 display:inline-block

解决方案: 设置 inline, 并触发 haslayout
{ display:inline-block; *display:inline; *zoom:1 }

问题十一：使用 hacker 解决兼容问题

使用hacker:
IE6认识的hacker是下划线_和星号*
IE7,遨游认识的hacker是星号*

比如这样一个CSS设置:
{ 
    height:300px; 
    *height:200px; 
    _height:100px; 
}

在IE6中从上往下读，直到_height，把高度设置成了100px;
在IE7和遨游中从上往下读，直到*height，把高度设置成了200px;
在其他浏览器中，把高度设置成了300px。

问题十二：获取自定义属性

IE浏览器下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性。

Firefox浏览器下，只能使用getAttribute()获取自定义属性。

解决方案：统一使用 getAttribute() 获取自定义属性

问题十三：Chrome 浏览器的中文界面下默认会将小于 12px 的文本强制按照 12px 显示

解决方案：加入 CSS 属性 {-webkit-text-size-adjust: none; }

问题十四：超链接访问过后 hover 样式就不出现了；被点击访问过的超链接样式不再具有 hover 和 active 了

解决方案：改变 CSS 属性的排列顺序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

问题十五：even对象

IE浏览器下，even对象有x,y属性，但是没有pageX,pageY属性。

Firefox浏览器下，event对象有pageX,pageY属性，但是没有x,y属性。

解决方案：条件注释
缺点：在IE浏览器下可能会增加额外的 HTTP 请求。

参考：

常见浏览器兼容性问题与解决方案

浏览器兼容问题

END

【前端】浏览器兼容问题及其解决方案

猜你喜欢