浏览器兼容性常见
浏览器兼容问题⼀:不同浏览器的标签默认的外补丁和内补丁不同
问题症状:随便写⼏个标签,不加样式控制的情况下,各⾃的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%
解决⽅案:在⽗元素和⼦元素之间加⼊<div stye=‘height:0’> </div>。或者设置⽗元素的padding-top。