浏览器兼容性常见 - 地球小子

浏览器兼容性常见

浏览器兼容问题⼀：不同浏览器的标签默认的外补丁和内补丁不同

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

 

碰到频率:100%

 

解决⽅案：CSS⾥ *{margin:0;padding:0;}

备注：这个是最常 的也是最易解决的⼀个浏览器兼容性问题，⼏乎所有的CSS⽂件开头都会⽤通配符*来设置各个标签 的内外补丁是0。

浏览器兼容问题⼆：块属性标签float后，⼜有横⾏的margin情况下，在IE6显⽰margin⽐设置的⼤

 

问题症状:常 症状是IE6中后⾯的⼀块被顶到下⼀⾏

 

碰到频率：90%（稍微复杂点的 ⾯都会碰到，float布局最常 的浏览器兼容问题）

 

解决⽅案：在float的标签样式控制中加⼊ display:inline;将其转化为⾏内属性

 

备注：我们最常⽤的就是div+CSS布局了，⽽div就是⼀个典型的块属性标签，横向布局的时候我们通常都是⽤div float实 现的，横向的间距设置如果⽤margin实现，这就是⼀个必然会碰到的兼容性问题。

浏览器兼容问题三：设置较⼩⾼度标签（⼀般⼩于10px），在IE6，IE7，遨游中⾼度超出⾃⼰设置⾼度

 

问题症状：IE6、7和遨游⾥这个标签的⾼度不受控制，超出⾃⼰设置的⾼度

 

碰到频率：60%

 

解决⽅案：给超出⾼度的标签设置overflow:hidden;或者设置⾏⾼line-height ⼩于你设置的⾼度。

 

备注：这种情况⼀般出现在我们设置⼩圆⾓背景的标签⾥。出现这个问题的原因是IE8之前的浏览器都会给标签⼀个最⼩ 默认的⾏⾼的⾼度。即使你的标签是空的，这个标签的⾼度还是会达到默认的⾏⾼。

浏览器兼容问题四：⾏内属性标签，设置display:block后采⽤float布局，⼜有横⾏的margin的情况，IE6间距bug

 

问题症状：IE6⾥的间距⽐超过设置的间距

 

碰到⼏率：20%

 

解决⽅案：在display:block;后⾯加⼊display:inline;display:table;

 

 

 

备注：⾏内属性标签，为了设置宽⾼，我们需要设置display:block;(除了input标签⽐较特殊)。在⽤float布局并有横向的 margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本⾝就是⾏内属性标签，所以我们再加 上display:inline的话，它的⾼宽就不可设了。这时候我们还需要在display:inline后⾯加⼊display:talbe。

浏览器兼容问题五：⼦元素绑架⽗元素的margin-top

 

问题症状：这个问题主要出现在⾮IE浏览器中。如果⼦元素和⽗元素之间没有任何内容，将⼦元素设置margin-top后，⼦ 元素不会动，⽽⽗元素会因为margin-top往下移动。

 

碰到⼏率：80%

 

解决⽅案：在⽗元素和⼦元素之间加⼊

 

。或者设置⽗元素的padding-top。