*学习笔记
旧浏览器在设计上有很多缺陷,导致一些bug的产生,针对这些问题要做出兼容处理。
常见兼容问题
1.透明度
2.双边距
3.最小高度
4.图片边框
透明度:
/* IE8以下透明度没有显示 */
/* .box{width: 100px;height: 100px;background-color: red;opacity: 0.5;} */
/* filter:alpha(opacity=50) 解决透明度问题*/
.box{width: 100px;height: 100px;background-color: red;opacity: 0.5;filter:alpha(opacity=50);}
<div class="box"></div>
双边距:
.box{float:left;width:100px;height: 100px;background-color: red;margin-left: 50px;}
<div class="box"></div>
在块元素使用float:left的情况下用margin-left: 50px,IE6版本会出现2倍的边距。只要再加上_display:inline就可以解决。
最小高度:
/* IE6/5下的最小高度bug,最小高度为19px ,用overflow:hidden可以解决*/
.box{width:100px;height: 3px;background-color: red;overflow:hidden}
图片边框:
/* img边框问题,加a链接标签IE10以下版本的图片会出现边框,解决用border:none */
img{border: none;}
<a href="#">
<img src="image/1.jpg" alt=""></a>