css浏览器兼容问题合集

这是一个陆续完善的文章，记录一些书写css制作页面过程中遇到的兼容性问题，以作记录，可待查阅参考。

1、IE6浮动元素双倍边距

出现条件：当浮动元素的浮动方向与边距方向一致时出现，比如：float: left;margin-left: 10px;  或者 float: right,margin-right: 10px;

没什么好说的，这样设置浮动css类：

.left {float: left;fisplay: inline;}
.right {float: right;fisplay: inline;}

2、复杂的浮动布局中，如果在两个浮动元素之间出现注释，有可能会触发IE6下最后一个文本重复的bug

a 浮动是魔鬼

b 浮动的标签之间不放注释，把注释放入标签内部

3、最小高度（宽度）的兼容实现

.class {min-width: 100px;_width: 100px;min-height: 100px;_height: 100px;}

4、IE6/7下,li子元素左浮动,且浮动子元素的同级元素右浮动,则li之间会有间隙,间隙大小随字体大小而变化

a 设置li元素浮动

b 设置li元素的 vercital-align 属性为 middle,bottom等值(推荐)

5、IE6父元素奇数宽高，子元素绝对定位1px间隙

外部容器为相对定位，宽高为奇数，子容器绝对定位，定位方向为 横向right, 纵向top或者bottom(height为奇数的情况下)

a 外部容器宽高设置为偶数数值

6、IE6下，盒子两边边框线断裂

这个问题遇到的比较少，出现情况：容器内有两个或多个浮动的子元素，并在子元素末尾用clear清除浮动，拖动滚动条时最外层的border会消失

a 给父级元素设置height:1%或zoom:1等 (触发IE6 haslayout)

b 给父级元素设置固定宽度width (同样也能触发IE6 haslayout)

c 给父级元素设置一个背景色background-color (触发回流,使IE6重绘,重绘当然也会包含border?)

7、position:relative/absolute无法冲破的等级

如果我我们设定LI为position:relative;设置span为position:absolute;那么我们会发现无论span的z-index值设置得再高都将永远在后面父级的下面。

设置同样的position:relative/absolute;同级标签之间的等级是无法用z-index超越的

解决方法：对需要定位的元素，在需要的时候为其赋予定位属性，达到超越同级元素的效果

<style>
*{margin: 0;padding: 0;}
body {font-size: 12px;color: #000;text-align: center;}
ul, ol {list-style: none;}
img {border: none;}
.clearfix:after {visibility: hidden;display: block;height: 0;font-size: 0;clear: both;}
.clearfix {*zoom: 1;}

.left {float: left;}
.right {float: right;}

.wrap {margin: 0 auto;padding: 50px;width: 960px;text-align: left;}
.demoDesc {margin-bottom: 10px;}
.demoDesc dt {font-size: 14px;font-weight: 700;}
.demoDesc dd {text-indent: 2em;}

.demoWrap {margin-bottom: 10px;color: #fff;background: #ccc;}
.demo {height: 200px;}
.demo li {float: left;margin-right: 5px;width: 100px;height: 100px;background: #f00;}

.demo3 a {display: block;width: 100px;height: 100px;background: #f00;}
.demo3 a:hover {position: relative;}
.demo3 span {display: none;width: 200px;height: 200px;background: #000;}
.demo3 a:hover span {display: block;position: absolute;left: 100px;top: 0;}
</style>

    <div class="demoWrap">
        <p>修复方法就是，鼠标移动到哪个 a 上，就给a设置定位属性</p>
        <ul class="demo demo3 clearfix">
            <li>
                <a href="#">1
                    <span>span1</span>
                </a>
            </li>
            <li>
                <a href="#">2
                    <span>span2</span>
                </a>
            </li>
            <li>
                <a href="#">3
                    <span>span3</span>
                </a>
            </li>
            <li>
                <a href="#">4
                    <span>span4</span>
                </a>
            </li>
            <li>
                <a href="#">5
                    <span>span5</span>
                </a>
            </li>
        </ul>
    </div>

8、IE6下a:hover伪类 bug

鼠标移入a元素,a里面的img对象增加宽高,覆盖在同级元素上.要做这样的效果,一不小心就会遇到IE6下的a:hover bug。简单的解释就是(个人理解，不知道是否正确):a
:hover如果没有设置相应的属性值，那么该元素在hover以后就不会重绘，想要的效果就出不来，看代码：

<style>
.demo {height: 200px;}
.demo li {float: left;margin-right: 5px;width: 100px;height: 100px;background: #f00;}

.demo2 a {display: block;position: relative;z-index: 1;width: 100px;height: 100px;background: #f00;}
.demo2 a:hover {border: none;/*background: #fff;*//*一个能够触发重绘的属性*/}
.demo2 span {display: none;width: 200px;height: 200px;background: #000;}
.demo2 a:hover span {display: block;position: absolute;left: 100px;top: 0;z-index: 1000;}
</style>
<ul class="demo demo2 clearfix">
    <li>
        <a href="#">1
            <span>span1</span>
        </a>
    </li>
    <li>
        <a href="#">2
            <span>span2</span>
        </a>
    </li>
    <li>
        <a href="#">3
            <span>span3</span>
        </a>
    </li>
    <li>
        <a href="#">4
            <span>span4</span>
        </a>
    </li>
    <li>
        <a href="#">5
            <span>span5</span>
        </a>
    </li>
</ul>

我想要的是，当鼠标移入a，那么span元素就出现，并且覆盖在其他的li（a）元素的上方。

a:hover 里面，我设置了一个 border: none; 属性，这个主要就是用来触发a重绘的，我的注释里面还有设置背景background属性(如果背景属性的值与a里面的一样，那么也是无用的，必须有改变)。

找到了原因，修复的方法也很简单，就是为a:hover状态设置触发重绘的属性，比如：border,background,position,padding,text-align,.....

9、IE6/7没有滚动条

html, body {overflow: hidden;}

IE6/7 需增设html的oiverflow属性值为hidden。

10、IE6对容器使用滤镜，会导致容器下的a元素无法被点击

大家都喜欢使用png图片，但是png24格式图片的透明效果在IE6下无法透明，呈现灰色，不得已使用IE的私有滤镜来实现图片的透明效果

a 给链接设置 position 属性，值为relative

b 如果容器绝对定位，那么给a设置相对定位也解决不了上面的bug，这时可以给容器外层再加一个div层，并对该层进行绝对定位

c 对不支持png24的浏览器，降级使用png8(我比较喜欢这个)

d 无视IE6吧

相关代码(注：在IETest的IE6下，滤镜不起作用，bug也无法正常重现)：

11、Firefox下button/input[type=submit]文字稍微靠下

input[type=submit]元素，以及button元素的文字，在ff（某些版本）中不能垂直居中

a 使用 button 替换掉 input(submit, reset) 是一个比较好的做好，配合 button::-moz-focus-inner {margin: 0;padding: 0;border: none;} 可消除 FireFox 下 button 的文字不能垂直居中的问题

b button的文字默认是垂直居中的，不需要配合 line-height 来做垂直居中

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>Firefox下button/input[type=submit]文字稍微靠下</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{margin: 0;padding: 0;}
body {font-size: 12px;color: #000;text-align: center;}
ul, ol {list-style: none;}
img {border: none;}
.clearfix:after {visibility: hidden;display: block;height: 0;font-size: 0;clear: both;}
.clearfix {*zoom: 1;}

.left {float: left;}
.right {float: right;}

.wrap {margin: 0 auto;padding: 50px;width: 960px;text-align: left;}
.demoDesc {margin-bottom: 10px;}
.demoDesc dt {font-size: 14px;font-weight: 700;}
.demoDesc dd {text-indent: 2em;}

.demoWrap {margin-bottom: 10px;color: #fff;background: #ccc;}
.demo {}

button:active {outline:none;}
button::-moz-focus-inner {margin: 0;padding: 0;border: none;}

input[type=submit], input[type=reset] {height: 45px;}
button {height: 45px;}
</style>
</head>
<body>

<div class="wrap">
    <dl class="demoDesc">
        <dt>Firefox下button/input[type=submit]文字稍微靠下</dt>
        <dd>使用 button 替换掉 input(submit, reset) 是一个比较好的做好，配合 button::-moz-focus-inner {margin: 0;padding: 0;border: none;} 可消除 FireFox 下 button 的文字不能垂直居中的问题</dd>
        <dd>button的文字默认是垂直居中的，不需要配合 line-height 来做垂直居中</dd>
    </dl>
    <div class="demoWrap">
        <form action="#" method="post">
            <dl class="">
                <dt><label for="">用户名:</label></dt>
                <dd><input type="text" id="" class="" value="用户名" /></dd>
            </dl>
            <dl class="">
                <dt><label for="">密码:</label></dt>
                <dd><input type="password" id="" class="" value="" /></dd>
            </dl>
            <p><input type="submit" value="提交-input-submit" />&nbsp;&nbsp;<input type="reset" value="重置-input-reset" /></p>
            <p><button type="submit">提交-button-submit</button>&nbsp;&nbsp;<button type="reset">重置-button-reset</button></p>
        </form>
    </div>
</div>

</body>
</html>

 12、IE6下z-index的bug

z-index，简单的说就是控制层级大小，举个栗子：

有10张纸，编号1-10，我们现在要按照从大到小的顺序把纸张整理好，所以我们会依据编号来整理纸张，对吧，大的在上，小的在下，这里，纸张就是div(层)，编号就是z-index的值，这么说应该会清晰一些。

不是所有的层设置z-index属性都会起作用，只有是具有position属性且值为relative|absolute|fixed的元素才会有用，这个可以形象的理解为有关系才能被重视，嗯，就是这个意思，哈哈

z-index的值越大，则该元素越靠上（想像你把一本书倒过来看的情形），这一规则在IE6下有些不一样:

a 父元素相对定位，z-index值设置很大，子元素浮动，该浮动元素无法穿透z-index值比父元素小的定位元素。

貌似这个bug与haslayout有关，修复方法：去除浮动；对浮动元素设置相对定位(推荐)或绝对定位。

b 绝对定位的子元素，其父元素若为相对或绝对定位，则该绝对定位的子元素的层级表现，在IE6下不是由自身的z-index绝对，而是要看其为相对或绝对定位的父元素的z-index决定。

还有个解释：ie6、7下面position非static的元素都会被隐含添加了z-index:0的属性，而比较不同dom分支上的元素Z向高度的标准做法是寻找他们第一个设置了z-index属性(position非static)的父元素，这就造成了ie6、7下面非要找到第一个position非static元素(这个元素被ie默认添加了z-index:0)进行Z向高度比较的bug。

解决方法：解决方法就是给绝对定位的父元素较大的z-index值

相关代码：

<style>
.blank {position: absolute;left: 0;top: 0;z-index: 1;width: 100%;height: 600px;background: #000;opacity: 0.4;filter: alpha(opacity=40);}

.demo-1 {position: relative;z-index: 9999;}
.demo-1 img {float: left;position: relative;}

.demo-2 {position: relative;z-index: 2;}
.demo-2-div {position: relative;z-index: 1000;}
.demo-2-div-div {position: absolute;z-index: 9999;}
</style>

<div class="demoWrap">
    <div class="blank"></div>
    <div class="demo-1">
        <img src="a.png" />
    </div>
    <p>IE6下img不能穿透blank层，貌似是因为img的浮动属性使元素脱离了文档流，这里给浮动元素添加position: relative;来修改该bug</p>
</div>

<div class="demoWrap">
    <div class="blank"></div>
    <div class="demo-2">
        <div class="demo-2-div">
            <div class="demo-2-div-div">
                <img src="a.png" />
            </div>
        </div>
    </div>
    <p>绝对定位的子元素，其父元素若为相对或绝对定位，则该绝对定位的子元素的层级表现，在IE6下不是由自身的z-index绝对，而是要看其为相对或绝对定位的父元素的z-index决定。</p>
    <p>该bug还有个解释：ie6、7下面position非static的元素都会被隐含添加了z-index:0的属性，而比较不同dom分支上的元素Z向高度的标准做法是寻找他们第一个设置了z-index属性(position非static)的父元素，这就造成了ie6、7下面非要找到第一个position非static元素(这个元素被ie默认添加了z-index:0)进行Z向高度比较的bug。</p>
    <p>解决方法就是给绝对定位的父元素较大的z-index值</p>
</div>

13、ie6下 gif动画不动

a 有onclick事件：在IE6中，点击a标签，onclick事件会先执行，其次是href下的动作，href执行后，默认会执行跳转动作（尽管href属性不一定是一个地址），于是页面中的加载就停止了，gif图片就停止播放了。这个应该是IE6底层机制的bug。

  解决方法：在onclick事件后加上return false,这时href就不会被执行。

b 可能是浏览器的设置问题：工具——internet选项——高级——多媒体：勾选播放页面中的动画

14