浏览器CSS兼容问题汇总及解决_html/css_WEB-ITnose

由于公司项目要求兼容到IE6，这之中遇到不少CSS兼容性问题，所以就在博客汇总下来，以后在项目中遇到新的兼容性问题，也会在这里更新。

1.IE6下height属性会失效

问题描述：在IE6下，即使块级元素设置了高度，但若元素内部的内容超出设置高度，内部内容会把该块级元素高度撑开，height失效。

解决方法：对该块级元素设置overflow:hidden;

 

2.div存在最小高度

问题描述：在IE6下，块级元素会存在大概是13px默认最小高度，即使是空的div标签或者height属性设置比13px小，也无济于事，这是因为IE6会默认font-size:13px;，即使是空div，也会被撑开，呈现13px的最小高度。

解决方法：设置font-size:0;或者overflow:hidden;

 

3.IE6下png图片背景不透明

问题描述：在IE7下，png图片背景会呈现灰色，而不是透明。

问题解决：解决方法有多种，我只列出我常用的两种：

　　　　　1.用插件解决，插件地址及调用方法如下所示：

<!--[if IE 6]><script src="http://img3.job1001.com/js/png.min.js" ></script><script>DD_belatedPNG.fix('.head img,.nav_phone img,.search,.qq img');</script><![endif]-->

　　　　   2.将图片保存成gif格式

 

4.IE6下设置了position:absolute;的元素不显示

问题描述：IE6下，设置了position:absolute;的元素有可能不显示，原因未明。

问题解决：在该元素后面加个空的div标签，

 

5.IE6下float:right;的元素会换行

问题描述：IE6下，同一行设置若干元素float:left;后若有元素设置float:right;,该元素会换行。

问题解决：把foat:right;的元素放置在最前面

 

6.IE6下，line-height失效

问题描述：IE6下，当文字和img、input、textarea、select、等元素在同一个容器中的时候，line-height属性失效。只有全文字时，line-height属性才有效。

问题解决：在其中一个非文字的对象的样式中增加margin: (容器的line-height - 对象本身的高度)/2px 0;  和 vertical-align:middle;

 

7.IE6下，hover失效

问题描述：IE6下，hover只对a标签有效

问题解决：用JS代码解决

 

8.IE6不兼容position:fixed;

问题描述：IE6不支持position:fixed;

问题解决：1.用JS代码解决

　　　　　 2.用css expression解决（备注：由于css expression极其影响性能，一般情况下不推荐使用），代码如下：

/* IE6 头部固定定位 */.fixed-top{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}/* IE6 右侧固定定位 */.fixed-right{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft, 10)||0)-(parseInt(this.currentStyle.marginRight, 10)||0));}/* IE6 底部固定定位 */.fixed-bottom{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||0)-(parseInt(this.currentStyle.marginBottom, 10)||0)));}/* IE6 左侧固定定位 */.fixed-left{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}

　　　　这之中可能会出现抖动的情况，所以还需加入

/* 修正IE6抖动bug */_body{background-image:url(about:blank);background-attachment:fixed;}

 

9.IE6浮动时会出现双倍margin的bug

问题描述：IE6用float浮动时会出现双倍margin的bug

问题解决：设置属性display:inline;

 

10.当li中出现2个或以上的浮动时，li之间产生的空白间隙的BUG

问题描述：在IE6、7中，当li中出现2个或以上的浮动时，li之间产生的空白间隙的BUG

问题解决：设置属性vertical-align:top;

 

11.IE6下的文本溢出BUG

问题描述：如下代码，在IE6下，文本内容会溢出，多出一个“了”，并且注释条数越多，溢出的内容也会随之增多

.test{zoom:1;overflow:hidden;width:500px;}.box1{float:left;width:100px;}.box2{float:right;width:400px;}<div class="test">    <div class="box1"></div>    <!-- 注释 -->    <div class="box2">我就要溢出来了</div></div>

 

问题解决：方法1：删掉box1和box2之间的所有注释

　　　　　方法2：取消box1和box2的浮动

 

后话：除了IE6、7一些自身的bug，更多兼容性问题来自于浏览器本身对一些CSS新属性、选择器或者一些新特性的不支持或者不完全支持，所以，如果项目需要支持低版本浏览器时，请确认所使用CSS特性的浏览器支持程度，推荐登录http://caniuse.com/进行检测。