目前IE内核浏览器仍然是国内主流浏览器，占据着PC浏览器的大部分市场份额，版本从IE6到IE10，所有前端工作者都必须面对和解决多个IE浏览器对代码的兼容性问题。在很多情况下，我们需要专门针对IE写css样式，即针对IE的css hack，下面将详细介绍这些内容：
1、常见的特殊符号的应用：
IE6：
_selector{property:value;}
selector{
property:value;//ie6下显示第一个值
property:value !important;
} //IE6 不支持同一选择符中的 !important
IE7：
+selector{
property:value;
}
IE8：
selector{
property:value\0;
}
IE6 & IE7：
*selector{
property:value;
}
IE6 & IE7 & IE8：
selector{
property:value\9;
}
总结起来，如下：
其中，S表示Standards Mode即标准模式，Q表示Quirks Mode，即兼容模式。
（了解更多Quirks模式、Strict(Standars)模式？）
hack 示例 IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q)
* *color Yes Yes Yes Yes No Yes
+ +color Yes Yes Yes Yes No Yes
- -color Yes Yes No No No No
_ _color Yes Yes No Yes No Yes
# #color Yes Yes Yes Yes No Yes
\0 color\0 No No No No Yes No
\9 color\9 Yes Yes Yes Yes Yes Yes
!important color:blue !important;
color:green; No No Yes No Yes No
2、条件注释语句（<!--[if IE]> <![endif]-->）
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
lt 表示less than 当前条件版本以下的版本，不包含当前版本。
gt 表示great than 当前条件版本以上的版本，不包含当前版本。
lte 表示less than or equal 当前版本以下版本，并包含当前版本。
gte 表示great than or equal 当前版本以上版本，并包含当前版本。
3、meta声明
由于IE8 可能会将页面按照 IE7 模式进行渲染，针对 多版本IE的现状，通常会采用设置 X-UA-Compatible HTTP 头的方式将页面在IE中采用统一的渲染模式。
//标准 IE7 模式 //兼容 IE7 模式 //标准 IE 模式4、其他（/*\**/注释法）
网上也流传着这样一种ie hack方法
.color1{
color:#F00;
color/*\**/:#00F /*\**/
}/*IE6,IE7,IE8,FF,OP,SA识别*/
.color2{
color:#F00;
color /*\**/:#00F /*\9**/
}/*IE7,IE8,FF,OP,SA识别*/
.color3{
color:#F00;
color/*\**/:#00F \9
}/*IE6,IE7,IE8识别*/
.color4{
color:#F00;
color /*\**/:#00F\9
}/*IE7,IE8识别*//*"color"和"/*\**/"之间有个空格*/
一：适用于个别元素，单独写兼容
_color : #fff ; 6
*+color : #fff ; 7
*color : #fff ; 6,7
color : #fff\0 ; 8,9,10
color : #fff\9\0 ; 9,10
color : #fff\9 ; 6,7,8,9,10
那怎么单独控制ie8 ?看下面：
color : #fff ;
color : #fff\9\0 ;
color : #000\0 ; ie8
是不是只在ie8下变成黑色
二：适用于单独引入针对ie的样式
<!--[if !IE]> 除IE外都可识别 <![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!-- [if lt IE 8]> IE8及以下 <![endif] -->
<!-- [if gte iE 8]> IE8及以上 <![endif] -->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
<!-- [if lt IE 9]> IE9及以下 <![endif] -->
<!-- [if gte IE 9]> IE9及以上 < ![endif] -->
不懂？举个栗子
<link rel="stylesheet" href="css/font-awesome.min.css">
<!--[if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.min.css">
<![endif]-->
三：适用于引入部分针对ie的样式，放在一起
仅IE6和IE7识别
@media screen\9 {
.selector {
font-size:20px;
}
}
仅IE6和IE7、IE8识别
@media \0screen\,screen\9 {
.selector {
font-size:20px;
}
}
仅IE8识别
@media \0screen {
.selector {
font-size:20px;
}
}
仅IE8-10识别
@media screen\0 {
.selector {
font-size:20px;
}
}
仅IE9和IE10识别
@media screen and (min-width:0\0) {
.selector {
font-size:20px;
}
}
四：不想写兼容肿么办？
加入下面这行代码：
<!--[if lte IE 8]>
<script>[size=normal]
window.location.href='http://www.chinaedu/upgrade-your-browser.html?referrer='+location.href;
</script>
<![endif]-->
强制用户使用ie9以上的浏览器
CSS 终极换行，兼容所有浏览器
width: 100px; /* 必须定义宽度 */
word-break: break-word; /* 文本行的任意字内断开 */
word-wrap: break-word; /* IE */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
更多推荐
针对IE6\7\8\9\10浏览器的CSS 兼容大全详解
发布评论