概念
CSS Hack用来解决浏览器的兼容性问题,为不同版本的浏览器定制编写不同的CSS效果,使用每个浏览器单独识别的样式代码,控制浏览器的显示样式。
Hack分类
1. CSS属性前缀法
2. 选择器前缀法
3. IE条件注释法
CSS属性前缀法
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期的页面展现效果。
.box{ width:100px; height:100px; background: red; _background:blue;}
注意\9、\0的写法
.box{ width:100px; height:100px; background: red; background:blue\9;}
.box{ width:100px; height:100px; background: red; background:blue\0;}
选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
*html .box{ width:100px; height:100px; background:red;}
IE条件注释法
这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--[if gte IE 7]>
<div class="box"></div>
<![endif]-->
</body>
</html>
body部分中注释, 如果不是对应的IE版本浏览器不会识别的。