【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+ */