CSS hack总结
CSS Hack的三种形式，CSS类内部Hack、选择器Hack以及CSS条件注释。
1. 类内部hack:
IE6专用hack下划线"_"， IE6,7能识别"*", "*+", "+", IE8,9支持"\0","\9", Opera支持"\9" 。
<!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>CSS hack Test</title> <style type="text/css"> .box { width: 200px; height: 200px; border: 1px solid #ccc; color: Black; color: Teal\0; /* 支持IE8,9 */ color: Navy\9; /* 支持IE8,9, Opera */ *color: Red; /* 支持IE6, IE7 */ *+color: Yellow; /* 支持IE6, IE7 */ +color: Gray; /* 支持IE6, IE7 */ _color: Green; /* IE6专用hack */ } </style> </head> <body> <div class="box"> test<br /> test<br /> test<br /> </div> </body> </html>
2. 选择器hack:比如 IE6能识别*html .class{}，IE7能识别*+html .class{}
<!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>CSS hack selector Test</title> <style type="text/css"> .box { width: 200px; height: 200px; border: 1px solid #ccc; color: Black; } *html .box { color: Red; } *+html .box { color: Lime; } </style> </head> <body> <div class="box"> test<br /> test<br /> test<br /> </div> </body> </html>
3.CSS条件注释:CSS条件注释写在html代码里，只对IE系列的浏览器有效的一种hack,下面来介绍一下使用方法吧。
<!--[if XXX]> 这里是正常的html代码 <![endif]-->
- 它的基本结构形如html的注释(<!-->), 因此其他浏览器会把它当作注释而不会去解析它。
- IE系列的浏览器能够识别并解析它的内容。
- 由于条件注释使用了html注释的结构，所以它只能在html页面中使用，而不能在css文件中，但是你可以用<link>标签引用外部CSS样式文件并放入条件注释中。
这里XXX是一些特定的东东，在此列表几个出来，详细介绍各自的含义：
<!--[if IE]> / 如果浏览器是IE /
<!--[if IE 6]> / 如果浏览器是IE 6 的版本 /
<!--[if IE 7]> / 如果浏览器是IE 7 的版本 /
<!--[if IE 8]> / 如果浏览器是IE 8 的版本 /
上面是几个常用的判断IE浏览器版本的语法，下面再来介绍一下相对比较少用的逻辑判断的参数：lte，lt，gte，gt及!
各自的详细解释如下：
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思
<!--[if gt IE 7]> / 如果IE版本大于7 /
<!--[if lte IE 6]> / 如果IE版本小于等于6 /
<!--[if !IE]> / 如果浏览器不是IE /
......
看到这里相信大家都已经明白了条件注释的用法了，OK，那来举个例子吧：
<!-- 默认先调用css.css样式表 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if !IE]>
<!-- 非IE下调用1.css样式表 -->
<link rel="stylesheet" type="text/css" href="1.css" />
<![endif]-->
<!--[if lt IE 6]>
<!-- 如果IE浏览器版本小于6,调用2.css样式表 -->
<link rel="stylesheet" type="text/css" href="2.css" />
<![endif]-->
浙公网安备 33010602011771号