IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack适配1览表

日期:2021-03-13 类型:科技新闻 

关键词:在线抠图,稿定抠图,在线抠图透明图片,可以抠图的软件,凡科制图

不一样的访问器对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看就了解那个对那个了。
上一篇:互联网营销推广服务 返回下一篇:没有了