Hack

 

我们写的是同一份HTML、CSS代码，要分发给不同的用户。用户使用不同版本的浏览器来进行渲染，而我们写的是同一份代码。

所以，我们就急需一种功能，就是写的确实是一个代码，但是代码中的某个部分，是某个、某些特定的浏览器才能解析，其他浏览器不解析的，这种技术就是Hack（黑客）。Hack就是针对不同的浏览器去写不同的HTML、CSS样式，从而让各浏览器能达到一致的渲染效果。

Hack分为两大类：HTML hack、CSS hack。

2.1 HTML Hack

写一段html代码，这段html代码只能在IE6、7中运行，IE8不运行。

1    <!--[if lte IE 8]>

2    自定HTML内容

3    <![endif]-->

上面的这个壳子很神奇，IE6、7、8会渲染里面的内容；而IE9、IE10、Chrome等等浏览器都会认为这些代码是注释。

所以，我们可以用这个方法，单独的为IE浏览器写特殊的HTML标签。

if就是如果，lte表示less than or equal小于等于，endif表示结束如果。要求背诵！

感谢微软，浏览器比较烂，但是给我们留了Hack的后门，自知之明。

 

如果版本小于等于IE8，那么识别，否则当做注释了：

1<!--[if lte IE 8]>

2 

3<![endif]-->

如果版本小于IE8，那么识别，否则当做注释了：

1<!--[if lt IE 8]>

2 

1<![endif]-->

如果版本大于IE8，那么识别，否则当做注释了：

1<!--[if gt IE 8]>

2 

1<![endif]-->

如果版本大于等于IE8

3<!--[if gte IE 8]>

4 

1<![endif]-->

如果版本是IE6：

1<!--[if IE 6]>

2 

3<![endif]-->

 

 

用途，比如让IE6、7、8运行一段JS代码，而其他浏览器不运行：

1    <!--[if lte IE 8]>

2       <script type="text/javascript" src="1.js"></script>

3    <![endif]-->

 

特别注意，这个Hack不能写在CSS里：

错误的写法：

1    <style type="text/css">

2       <!--[if lte IE 8]>

3           h1{

4              color:red;

5              

6           }

7       <![endif]-->

8    </style>

 

2.2 CSS 值Hack

CSS HACK又分为两类：值Hack 和 选择器Hack

先来学习值Hack：

IE6专用的“hack符”就是短横、下划线。

1       div{

2           width: 200px;

3           height: 200px;

4           background: red;

5           _background: blue;

6       }

那么高级浏览器不识别_background:blue;这行语句的，视为这是unknown property name;

IE6自己，会渲染为蓝色。

短横和下划线都行，

1_background:blue;

等价于：

1-background:blue;

 

如果想同时调教IE6、7：

hack符可以是任意一个： ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */

比如：

1    <style type="text/css">

2       div{

3           width: 200px;

4           height: 200px;

5           background: red;

6           !background:green;

7       }

8    </style>

高级浏览器、IE8、IE9、IE10渲染为红色，而IE6、7渲染为绿色。

 

如果想调教IE8和9，hack符写在后面，分号前：

1

那么只有IE8、9会认识这行语句。

 

如果想调教IE 6、7、8、9、10 ，那么hack符写在后面，分号前：

1background:red\9;

 

选择符远不止这些，但是常见就是上面这些，更多的可以自己百度。

 

2.3 CSS 选择器Hack

选择器的hack不怎么常用

如果想单独IE6：

1    <style type="text/css">

2       * html div{

3           width: 200px;

4           height: 200px;

5           

6       }

7    </style>

等价于：

1div{

2    _width: 200px;

3    _height: 200px;

4    _

5}

 

IE6和IE7：

1div,{

2    width: 200px;

3    height: 200px;

4    

5}

等价于：

1div{

2    !width: 200px;

3    !height: 200px;

4    !

5}

 

除了IE6：

1html>body div{

2    width: 200px;

3    height: 200px;

4    

5}

如果有兴趣，可以自行百度，工作中用不着这么多。