欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-06 20:37:04
...
浏览器兼容性常见

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

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