不一样的访问器对CSS的解释都有1点进出,非常是padding, line-height这些要微小操纵的地区,下面的hack基础能够处理这个难题:
• 在特性前加下划线(_),那末此特性只会被IE6解释
• 在特性前加星号(*),此特性只会被IE7解释
• 在特性值后边加"\9",表明此特性只会被IE8解释
各访问器CSS hack适配表:
IE6
IE7
IE8
Firefox
Chrome
Safari
!important
Y
Y
_
Y
*
Y
Y
*+
Y
\9
Y
Y
Y
\0
Y
nth-of-type(1)
Y
Y
#test{
color:red; /* 全部访问器都适用 */
color:red !important;/* Firefox、IE7适用 */
_color:red; /* IE6适用 */
*color:red; /* IE6、IE7适用 */
*+color:red; /* IE7适用 */
color:red\9; /* IE6、IE7、IE8适用 */
color:red\0; /* IE8适用 */
}
body:nth-of-type(1) p{color:red;} /* Chrome、Safari适用 */
总体检测编码示例:
.test{
color:#000000;
color:#0000FF\0;
[color:#00FF00;
*color:#FFFF00;
_color:#FF0000;
}
#menu { line-height: 23px; }/* firefox 访问器推行这句界定 */
#menu { line-height: 26px\9; }/*ie6,ie7,ie8 这句界定关键尖对IE8来hack*/
#menu { *line-height: 23px; }/*ie6,ie7 这句界定关键尖对IE7来hack*/
#menu { _line-height: 23px; }/*ie6 访问器优先选择推行这句界定*/
或写成1句,留意次序
#menu { line-height:23px; line-height: 26px\9; *line-height: 23px; _line-height:23px; }
或
* html #menu { line-height: 23px; } /* IE6 访问器推行这句界定 */
*+html #menu { line-height: 23px; }/* IE7 访问器推行这句界定*/
别的表明:
1、假如你的网页页面对IE7适配沒有难题,又不想很多改动现有编码,另外又能在IE8中一切正常应用,微软宣称,开发设计商仅必须在现阶段适配IE7的网站上加上1行编码便可处理难题,此编码以下:
<meta http-equiv="x-ua-compatible" content="ie=7" />
2、body:nth-of-type(1) 假如这样写,表明全局性搜索body,可能对应第1个<body>。
3、也有别的写法,例如:
*html #test{}或 *+html #test{}
4、*+html 对IE7的hack 务必确保HTML顶部有以下申明:
http://www.w3.org/TR/html4/loose.dtd
5、次序:Firefox、IE8、IE7、IE6先后排序。
小专业知识:甚么是CSS hack?
因为不一样的访问器,例如IE6、IE7、IE8、Firefox等,对CSS的分析了解不1样,因而会致使转化成的网页页面实际效果不1样,得不到大家所必须的网页页面实际效果。
这个情况下大家就必须对于不一样的访问器去写不一样的CSS,让它可以另外适配不一样的访问器,能在不一样的访问器中也能获得大家要想的网页页面实际效果。
这个对于不一样的访问器写不一样的CSS code的全过程,就叫CSS hack,也叫写CSS hack。
下面是填补:
selector{
property:value; /* 全部访问器 */
property:value\9; /* 全部IE访问器 */
+property:value; /* IE7 */
_property:value; /* IE6 */
}
自然,留意次序。依据CSS的优先选择性,上面的写法,各自对于Firefox、IE8、IE7和IE6显示信息值。让大家看看这个演试:
提醒:您能够先改动一部分编码再运作
演试的CSS编码以下:
p.ie{
height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;font:15;
color:blue; // 全部访问器
color:brown\9; // 全部IE访问器
+color:red; // IE7
_color:green; // IE6
}
哈,客观事实就这么简易。你看到的是那1句话呢?假如你好几个访问器都检测了,就会看到,显示信息的文本和色调是不一样的。为何?看看我的HTML中这个段落是这样写的:
<p class="ie">
<span style="display:block;display:none\9;">嘿嘿,小子居然也用Firefox,蓝色文本。</span>
<!--[if IE 8]>非常好非常好,挺优秀的嘛,应用IE8呢!文本是褐色的。<![endif]-->
<!--[if IE 7]>你,IE7,鲜红色文本!<![endif]-->
<!--[if IE 6]>孩子,尽管显示信息的是翠绿色文本,但是,IE6可并不是好物品呢!<![endif]-->
</p>
对,便是IE标准注解+CSS的結果。顺道学1下IE标准注解吧。无需再举例了吧,1看就了解那个对那个了。