当前位置:Gxlcms > html代码 > 浏览器兼容性常见_html/css_WEB-ITnose

浏览器兼容性常见_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:28人阅读

浏览器兼容性常见

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

问题症状:随便写⼏个标签,不加样式控制的情况下,各⾃的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),在IE6IE7,遨游中⾼度超出⾃⼰设置⾼度

问题症状: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。

人气教程排行