Common Compatibility Issues of IE Browser
-
Compatibility problems
-
Picture border problem in ie
-
The picture is placed in the a tag
-
img { border:none }
-
-
The problem of writing background composite attributes in browsers below ie8
-
.bg { background:url("./images/bg.jpg")no-repeat center }
-
//解决方案:在url和no-repeat 直接加上空格 .bg { background:url("./images/bg.jpg") no-repeat center }
-
-
Other IE low version compatibility issues
-
Define small height containers in IE6 and earlier browsers
-
#test { overflow:hidden; height:1px; font-size:0; line-height:0; }
-
-
IE6 and earlier browsers produce double margin bug when floating
-
Solution: Set the display attribute of the label to inline for ie6
-
#test { float:left; _display:inline; }
-
-
The problem of auto|hidden invalidation of the overflow attribute of the parent tag when the child tags are positioned relative to each other in IE7 and earlier browsers
-
Solution: Set the relative positioning position: relative to the parent label.
-
-
Block ie7 is not displayed on one line in block transition
-
solution:
-
div { display:inline-block; *display:inline; *zoom:1; }
-
-
IE7 and below browsers clear floating problem
-
/* : 单冒号兼容性更好,不推荐用双冒号 :: */ .clearfix:after { content: ''; display: block; clear: both; } /* 兼容 ie7 及以下浏览器 清浮动问题 */ .clearfix { *zoom: 1; }
-
-
-
-
CSS Hack
-
Condition Hack
-
Greater than: gt
-
Greater than or equal to: gte
-
Less than: lt
-
Less than or equal to: lte
-
<!--[if IE]> <p>只在IE中能看到这个段落</p> <![endif]--> //只有IE6以上,才能看到应用了test类的标签是红色文本 <!--[if gt IE 6]> <style> .test { color:red; } </style> <![endif]-->
-
Condition comments have been removed from IE10 and above, please pay attention when using
-
Property-level Hack
-
_ Underscore: select IE6 and below
-
*: Choose IE7 and below
-
\0: Choose above ie8
-
-
color:red;//所有浏览器可识别 _color:red;//仅IE6识别 *color:red;//IE6、IE7识别 color:red\0;//IE8、IE9识别
-
Selector level Hack
-
* html .box { background:red; }//只有在IE6显示红色
-
* + html .box { background:red; }//只有在IE7显示红色
-
-