newset

浏览器 Bug 整理

发表于 |

z-index 错乱

1
-webkit-transform: translate3d(0,0,0);

浮动父元素高度问题

用clearfixed加在产生浮动元素的父元素上，并在全局样式中声明 

1
2
3
4
5
6
7
.clearfixed:after{ 
content:”.”; 
display:block; 
height:0; 
visibility:hidden; 
clear:both; 
}

opacity定义元素的不透明度（IE不兼容问题）

1
2
解决方案：IE浏览器的设置方式为filter:alpha(opacity=80);
其他浏览器直接设置opacity:0.8;

margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;

1
2
3
4
5
6
{ 
    float:left; 
    margin:5px;/*IE下理解为10px*/ 
    display:inline;/*IE下再理解为5px*/ 
}

IE与宽度和高度的问题

IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。
这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

1
2
3
4
5
6
7
8
9
比如要设置背景图片，这个宽度是比较重要的。
要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}
html>body #box { 
   width: auto; 
   height: auto; 
   min-width: 80px; 
   min-height: 35px; 
}