浏览器兼容性常见

Posted 2020-07-03

浏览器兼容性常见

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

问题症状：随便写?个标签，不加样式控制的情况下，各?的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。