开发者学堂课程【前端开发CSS基础：CSS hack 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4272
CSS hack
内容介绍：
一、 什么是 CSS Hack
二、 CSS Hack 分类
三、 CSS hack 方式一：条件注释法
四、 CSS hack 方式二：类内属性前缀法
五、 CSS hack 方式三：选择器前缀法
一、什么是 CSS Hack
由于不同厂商的浏览器或某浏览器的不同版本(如 IE6-IE11, Firefox/Safari/Opera/Chrome 等)，对 CSS 的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。
这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的 CSS 样式，我们把这个针对不同的浏览器/不同版本写相应的 CSS 代码的过程，叫做 CSS hack .
首先打开软件可以看到上面看到有 IE5、IE6、IE7、IE8、IE9 以及 IE11，而 IE5 现在现在百分之百是没有人使用的，IE6 一般在 xp 上面比较多，IE8 在 win7 上较多而 win7 以上的系统一般都在 IE10，win8 一般使用的是 IE11。
二、 CSS Hack 分类
CSS Hack 大致有3种表现形式，CSS 属性前缀法、选择器前缀法以及 IE 条件注释法(即 HTML 头部引用 if IE ) Hack ，实际项目中 CSS Hack 大部分是针对 1E 浏览器不同版本之间的表现差异而引入的。
1.属性前缀法(即类内部 Hack )；例如 IE6 能识别下划线“_“和星号”*”，IE7 能识别星号”*，但不能识别下划线“_”，IE6~IE10 都认识“\9”，但 firefox 前述三个都不能认识。
2．选择器前缀法(即选择器 Hack )：例如 IE6 能识别 *html.class()，IE7 能识别*+html. class{} 或者 *:first-child+html.class{} 。
3. IE 条件注释法(即 HTML 条件注释 Hack ):针对所有IE(注: IE10+ 已经不再支持条件注释): <1--[if1E]>IE 浏览器显示的内容 <1[endif]--> ，针对 IE6 及以下版本：<!--[if It IE 6]> 只在 IE6- 显示的内容 <![endif]-->。
这类 Hack 不仅对 CSS 生效，对写在判断语句里面的所有代码都会生效。
三、CSS hack 方式一：条件注释法
1.只在 IE 下生效：
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
2.只在 IE6 下生效：
<!--[if IE6]>
这段文字只在 IE6 浏览器显示
<![endif]-->
3.只在 IE6 以上版本生效：
<!-[if gte IE6]>
这段文字只在 IE6 以上(包括)版本IE浏览器显示
<![endif]-->
4.只在 IE8 上不生效：
<!--[if !IE8]>
这段文字在非 IE8 浏览器显示
<![endif]-->
演示只在 IE 上生效的：
新建文件并命名为 ifie
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
</body>
</html>
这种情况在 chrome 中是不会显示出来的，检测一下，
运行结果如下:
确实在运行结果中未发现字。
将上述图片中的网址 localhost:63342/box/ifie.html 复制，然后打开 IETester
在 IETester 页面中先选择 IE6、IE7、IE8；
再用 IE6 打开所复制的网址
这是可以看到所出现的文字
用 IE7 打开所复制的网址
这是可以看到所出现的文字，效果如图：
用 IE8 打开所复制的网址
这是可以看到所出现的文字，效果如图：
演示只在 IE6 上生效的：
新建文件并命名为 ifie
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--[if IE6]>
这段文字只在 IE6 浏览器显示
<![endif]-->
</body>
</html>
检测一下在 chrome 中是不会显示出来的，运行结果如下:
观察到在 chrome 浏览器上并未显示出
将上述图片中的网址 localhost:63342/box/ifie.html 复制，然后打开 IETester
在 IETester 页面中先选择 IE6、IE7、IE8；
再用 IE6 打开所复制的网址
这是可以看到所出现的文字，效果如图：
用 IE7 打开所复制的网址
这是可以看到所出现的文字.
用 IE8 打开所复制的网址
这是可以看到所出现的文字.
演示只在 IE6 以上版本上生效的：
新建文件并命名为 ifie
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-[if gte IE6]>
这段文字只在 IE6 以上(包括)版本 IE 浏览器显示
<![endif]-->
</body>
</html>
检测一下在 chrome 中是不会显示出来的，运行结果如下:
观察到在 chrome 浏览器上并未显示出
将上述图片中的网址 localhost:63342/box/ifie.html 复制，然后打开 IETester
用 IE7 打开所复制的网址
这是可以看到所出现的文字，
用 IE5 打开所复制的网址
这是可以看到所出现的文字，效果如图：
此时并未显示
演示只在 IE8 上不生效的
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-[if gte IE6]>
这段文字只在 IE6 以上(包括)版本IE浏览器显示
<![endif]-->
</body>
</html>
检测一下在 chrome 中是不会显示出来的，运行结果如下:
观察到在 chrome 浏览器上并未显示出，不生效
将上述图片中的网址 localhost:63342/box/ifie.html 复制，然后打开 IETester
用 IE6 打开所复制的网址
这是可以看到所出现的文字，效果如图：
用 IE7 打开所复制的网址
这是可以看到所出现的文字，效果如图：
用 IE8 打开所复制的网址
这是可以看到所出现的文字，效果如图：
是不可以看见的
用 IE5 打开所复制的网址
这是可以看到所出现的文字，效果如图：
可以显示
四、CSS hack 方式二：类内属性前缀法
1.属性前缀法是在 CSS 样式属性名前加上一些只有特定浏览器才能识别的 hack 前缀，以达到预期的页面展现效果。
2.在标准模式中
1)“_”下划线 IE6 识别
2)“*”星号 IE7 识别
3)“\9”IE6/IE7/IE8/IE9/IE10 都识别
4）“\0”IE8/IE9/IE10 都识别
5)“\9\0"只对IE9/IE10 识别
五、CSS hack 方式三：选择器前缀法
1.选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在 CSS 选择器前加上一些只有某些特定浏览器才能识别的前缀进行 hack 。并不很常用。
2.目前常见的是
<1>*html* 前缀只对 IE6 生效
<2>*+html*+前缀只对 IE7 生效
（1）创建新的 html 文件，并命名为 hack
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.one{
width:100px;
height:100px;
background -color: aquamarine ;
. two{
width:300px;
height:300px;
background-color:burlywood;
}
</style>
</head>
<body>
<div class="one">我是div1</div>
<div class="two">我是div2</div>
</body>
</html>
代码演示效果为：
此时得到两个垂直排列的div；
（2） 在给第一个 div 一个向左的 float 属性此时代码变为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.one{
float:left;
width:100px;
heght:100px;
background -color: aquamarine ;
}
. two{
width:300px;
height:300px;
background-color:burlywood;
}
</style>
</head>
<body>
<div class="one">我是div1</div>
<div class="two">我是div2</div>
</body>
</html>
代码演示效果为：
div1 是不占位的.
此时在 IETester 上进行检测
在 IE6 上可以得到如图结果：
这说明了 float 属性是不生效的，中间有缝隙。
在 IE7 上可以得到结果
此时 float 属性并未生效但是，中间得缝隙消失
在 IE8 上可以得到结果：
此时 float 属性生效
（3）代码优化
所以先来解决 IE6 下得缝隙问题，这是一个很出名得 bug 叫三像素问题，这时可以用类内属性前缀法来解决。
打开集成开发环境，先在第一个 div 得背景颜色得代码前加上下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.one{
float:left;
width:100px;
height:100px;
_background -color: aquamarine ;
}
. two{
width:300px;
height:300px;
background-color:burlywood;
}
</style>
</head>
<body>
<div class="one">我是div1</div>
<div class="two">我是div2</div>
</body>
</html>
运行结果得到：
这个下划线在 chrome 中是识别不到的，所以会出现如图结果
但在 IE6 下是可以看到得，同样复制该网页地址，在 IE6 上检测，
蓝色依旧出现，所以可以利用这个来解决著名得三像素问题
（4）效果应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.one{
float:left;
width:100px;
height:100px;
background -color: aquamarine ;
_margin-right: -3px;
}
. two{
width:300px;
heigt:300px;
background-color:burlywood;
}
</style>
</head>
<body>
<div class="one">我是div1</div>
<div class="two">我是div2</div>
</body>
</html>
复制该网页地址，在 IE6 上检测，结果如下：
此时，看不到缝隙，这个问题就可以解决了。
（5）方法三应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*html .one{
margin-right: -3px;
}
.one{
float:left;
width:100px;
height:100px;
background -color: aquamarine ;
/*_margin-right: -3px;*/
}
two{
width:300px;
height:300px;
background-color:burlywood;
}
</style>
</head>
<body>
<div class="one">我是div1</div>
<div class="two">我是div2</div>
</body>
</html>
运用 IE6，运行结果得到：
三像素问题一样可以得到解决
