【CSS Hack】解决IE、FireFox、Chrome、Safari、Opera等主流浏览器兼容的技巧.doc
文本预览下载声明
【CSS Hack】解决IE、FireFox、Chrome、Safari、Opera等主流浏览器兼容的技巧
CSS ack由于不同的浏览器， 比如Internet Explorer 6, Mozilla Firefox, Google Chrome, Apple Safari, 欧朋Opera等，对CSS的支持和解析不一样，还由于CSS中的优先级的关系，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。CSS Hack大致有3种表现形式，HTML头部引用(if IE)Hack，CSS Hack主要针对IE浏览器、选择器Hack以及CSS类内部Hack。HTML头部引用(if IE)Hack：针对所有IE：!--[if IE]!--您的代码--![endif]--，针对IE6及以下版本：!--[if lt IE 7]!--您的代码--![endif]--，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。代码如下:
head
meta http-equiv=Content-Type content=text/html; charset=gb2312 /
title演示: 区分 IE6 / IE7 /IE8 /Firefox/title
/head
style type=text/css media=screen
p.ie{
height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;
color:blue;
color:brown\9;
+color:red;
_color:green;
}
/style
body style=width:500px;margin:0 auto;
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
/body
/html?
选择器Hack：CSS内部选择符级Hackhack selector{ sRules }
选择不同的浏览器及版本
尽可能减少对CSS Hack的使用。Hack有风险，使用需谨慎
通常如未作特别说明，本文档所有的代码和示例的默认运行环境都为标准模式。
一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。代码如下:
* html .test{color:#090;} /* For IE6 and earlier */
* + html .test{color:#ff0;} /* For IE7 */
.test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */
.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */
CSS类内部Hack：CSS内部属性级Hackselector{hack?property:valuehack?;}
取值：
_： 选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。
*：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高。
\9：选择IE6+。
\0：选择IE8+和Opera。
[;property:value;]; ：选择webkit核心浏览器（Chrome,Safari）。IE7及以下也能识别。中括号内外的3个分号必须保留，第一个分号前可以是任意规则或任意 多个规则。 [;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。生效的始终是中括号内的最后一条规则，所以通常选用第一种写法最为简洁。
说明：一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。如想同一段文字在IE6,7,8显示为不同颜色，可这样写：
代码如下:
.test{
color:#090\9; /* For IE8+ */
显示全部