css hack技巧

来源：互联网发布：9wifi九维网络官网下载编辑：程序博客网时间：2024/06/09 04:05

利用CSS Hack技术方便独立控制某种浏览器的具体样式，可以有效控制 CSS 在不同浏览器的表现，避免撰写多个 CSS 文件。

CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSSHack主要针对IE浏览器。

　　(1).类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等

　　(2).选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等

(3).HTML头部引用(if IE)Hack：针对所有IE：<![endif]-->，针对IE6及以下版本：<![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

一、类内部CSS Hack写法

1. * 符号
IE 浏览器能识别 * 符号，但其他浏览器诸如 Firefox、Opera、Chrome 等不能识别 * 符号。
例：在 Firefox 和 IE 中呈现不同的文字颜色：.box{ color:red; *color:blue;} //在 Firefox 等非 IE 核心浏览器中，文字呈现红色；而 IE 中呈现蓝色。

2.!important

火狐浏览器识别，谷歌浏览器识别，IE7+（IE7、IE8、IE9、IE10）识别，但是IE6无法识别。注：IE7 不但能识别 * 符号，还能识别 !important，而 IE6 只能识别*符号，例：

<body>

<div class="box">123</div>
</body>
</html>
在火狐、谷歌、IE7+ 浏览器中，文字呈现红色；而 IE6 中呈现蓝色。

3. *html 和 *+html
*html 只有IE6浏览器能识别，*+html只有IE7浏览器能识别，两者Firefox 等非 IE 核心浏览器不能识别，IE8+等IE核心浏览器也不能识别。例：

4. \9 IE8以下浏览器IE版浏览器都支持，火狐和chrom浏览器不支持。例：

/*狐火和谷歌为蓝色；IE8为红色；IE7为绿色；IE6为粉色；*/
</style>
</head>
<body>
<div class="box">123</div>
</body>
</html>

5. \0 IE8以上浏览器识别，但是IE6、7不能识别。

注：\9\0只有IE9 能识别；

二、另一种方式的CSS Hack写法

1、@media all and (min-width:0) {} 浏览器Chrome, Safari, Firefox能识别，此法用于区别IE浏览器和其他浏览器。例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.box{width:100px; height:100px; border:1px solid #000;}
/* Chrome, Safari, Firefox */
@media all and (min-width:0) {.box{ background:#F00;//红色}}
/*火狐、谷歌、苹果浏览器背景色为红色，IE浏览器无背景色；此法用于区别IE浏览器和其他浏览器。*/
/* Chrome, Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {.box{ background: #0F0;//绿色 }
/*谷歌和苹果浏览器背景色为绿色，IE浏览器背景色为无，火狐为红色，此法用于区别IE、火狐与chrom、safari浏览器*/
/* IE9 only */
:root .box {background: #00F;//蓝色 }
</style>
</head>
<body>
<div class="box">111</div>
</body>
</html>

2、@media screen and (-webkit-min-device-pixel-ratio:0) { } 浏览器 chrome和safari浏览器能识别，此法用于区别IE、火狐与chrome、safari浏览器。例同上。

3、 :root .box {}I只有IE9 浏览器能识别。例同上上。

小结：

1、 CSS 中判别 Firefox，IE7，IE6 并加载不同样式。例：

在 Firefox 中，文字呈现蓝色，在 IE7 浏览器中，呈现红色；而 IE6 中呈现蓝色。