常见兼容性问题

常见兼容性问题:

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*/

}


猜你喜欢

转载自blog.csdn.net/qq_40184012/article/details/79450706