常见兼容性问题:
1.浏览器默认的margin和padding不同。
解决方案是加一个全局的*{margin:0;padding:0;}来统一。
2.ie相关浏览器的透明度兼容问题
解决方法:给元素设置filter:alpha(opacity=50);
代码如下:
html:
<div class="box"></div>
css:
body {
height: 2000px;
background: red;
}
.box {
width:200px;
height: 200px;
background: yellow;
position: fixed;
top:30px;
left:100px;
opacity: 0.5;
filter:alpha(opacity=50);/*此处解决透明度问题*/
}
3.ie6小于19px,会当成19px处理,也就元素宽高小于19px的bug
解决方法:overflow:hidden;
代码如下:
html:
<div class="box"></div>
css:
.box {
height:1px;
background: red;
overflow: hidden;/*此处如果没有这个,会默认19px*/
}
4.浮动后的元素在ie6下出现横向的双边距bug
解决方法给元素添加display:inline;
代码如下:
html:
<div class="box"></div>;
css:
.box {
width:100px;
height: 100px;
background: red;
float:left;
margin:100px;
display: inline;/*此处不添加会出现双边距bug*/
}