1.什么是 CSS hack
不同厂商的浏览器，例如Internet explorer、Safari、Mozilla Firefox、Chrome等，或者同一厂商的浏览器的不同版本，如IE6和7，对css的解析和认识会完全不一样，因此会导致生成和预想相差很大的页面效果，此时我们需针对不同的浏览器写不同的css，让它在不同的浏览器中展现预想的效果
css hack大致有三种表现形式：
| 名称 | 别称 | 举例 |
|---|---|---|
| 属性前缀法 | 内部hack | ie6能识别下划线和星号，ie7可以识别星号但不能识别下划线，ie6~ie10都识别“\9”，firefox前述三个都不识别 |
| 选择器前缀法 | 选择器hack | |
| ie条件注释法 | html条件注释hack | 针对所有ie：<!--[if IE]>IE浏览器显示的内容<![endif]-->。针对ie6及以下的版本：<!--[if lt IE6>只在IE6-显示的内容<![endit]-->。这类hack不仅对 css生效，对写在判断语句里面的所有代码都会生效 |
2.谈一谈浏览器兼容的思路
- 如何做
产品角度：受众群，受众群浏览器比例，优先效果还是优先基本功能
让哪些浏览器支持哪些效果
渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级（graceful degradation）：一开始就构建完整的功能，然后在针对低版本浏览器进行兼容 - 解决方案
根据兼容需要选择技术框架、库
根据需要选择兼容工具（html5shiv.js respond.js、css reset、 normalize.css、modernizr）
条件注释、css hack、js能力检查做修补
3.列举5种以上浏览器兼容的写法
- 例1
<!--[if IE 6]> （在ie6里的被识别的标签）
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script> （在chrome里被识别的只有这一句）
<!--<![endif]-->
<!--[if IE 8]>（在ie8里的被识别的标签）
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
- 例2
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
- 例3
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 仅对ie67有效 */
}
- 例4
.target{
display: inline-block;
*display: inline;/* 仅对ie67有效 */
*zoom: 1;/* 仅对ie67有效 */
}
- 例5
<!--[if lt IE 9]>/* 仅对ie9以下有效 */
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
4.以下工具/名词是做什么的
-
条件注释：conditional comment，是用于html源码中被ie有条件解释的语句，条件注释可被用来像ie提供及隐藏代码，ie10以上不再支持条件注释
-
IE Hack：使用特殊的符号或者方式写出只有IE浏览器可以解析的代码，有CSS属性前缀法、选择器前缀法以及IE条件注释法
-
js 能力检测：使用JS的语法检测浏览器支持的属性，以便展示效果
-
html5shiv.js：用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
-
respond.js：响应式媒体查询，可以在ie6、ie7上模拟出自己无法识css的属性，可以模拟css3的媒体查询
-
css reset：去除浏览器的默认样式
-
normalize.css：是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，normalize.css是一种现代的、为HTML5准备的优质替代方案。normalize.css保护浏览器有用的默认样式，而不是完全去掉他们，为大部分html元素提供一般化的样式，修复浏览器自身的bug并保证浏览器的一致性
-
Modernizr：处理兼容问题，Modernizr是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。
-
postCSS：用标准写法写css最后添加一个命令自动添加可以被老版本的浏览器接受的写法
5.一般在哪个网站查询属性兼容性？
canius.com查询css属性兼容
browserhacks查hack写法
网友评论