浏览器兼容问题?:不同浏览器的标签默认的外补丁和内补丁不同
问题症状:随便写?个标签,不加样式控制的情况下,各?的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。