文章目录
IE 浏览器常见兼容问题
-
兼容问题
-
ie中图片边框问题
-
图片放在a标签中
-
img { border:none }
-
-
ie8以下浏览器中背景复合属性的写法问题
-
.bg { background:url("./images/bg.jpg")no-repeat center }
-
//解决方案:在url和no-repeat 直接加上空格 .bg { background:url("./images/bg.jpg") no-repeat center }
-
-
其他ie低版本兼容问题
-
在IE6及更早浏览器中定义小高度的容器
-
#test { overflow:hidden; height:1px; font-size:0; line-height:0; }
-
-
IE6及更早浏览器浮动时产生双倍边距的BUG
-
解决方案:针对ie6设置该标签的display属性为inline即可
-
#test { float:left; _display:inline; }
-
-
IE7及更早浏览器下子标签相对定位时父标签overflow属性的auto|hidden失效的问题
- 解决方案:给父标签也设置相对定位position:relative;
-
块转行内块 ie7 不在一行显示
-
解决方案:
-
div { display:inline-block; *display:inline; *zoom:1; }
-
-
ie7 及以下浏览器 清浮动问题
-
/* : 单冒号兼容性更好,不推荐用双冒号 :: */ .clearfix:after { content: ''; display: block; clear: both; } /* 兼容 ie7 及以下浏览器 清浮动问题 */ .clearfix { *zoom: 1; }
-
-
-
CSS Hack
-
条件Hack
-
大于:gt
-
大于或等于:gte
-
小于:lt
-
小于或等于:lte
-
<!--[if IE]> <p>只在IE中能看到这个段落</p> <![endif]--> //只有IE6以上,才能看到应用了test类的标签是红色文本 <!--[if gt IE 6]> <style> .test { color:red; } </style> <![endif]-->
-
IE10以上已经将条件注释移除,使用时要注意
-
属性级Hack
-
_ 下划线:选择IE6及以下
-
*:选择IE7及以下
-
\0:选择ie8以上
-
-
color:red;//所有浏览器可识别 _color:red;//仅IE6识别 *color:red;//IE6、IE7识别 color:red\0;//IE8、IE9识别
-
选择符级Hack
-
* html .box { background:red; }//只有在IE6显示红色
-
* + html .box { background:red; }//只有在IE7显示红色
-
-