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超越的

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

View Code

<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