1.什么是 CSS hack
由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack。
2.谈一谈浏览器兼容的思路
- 需不需要做
- 产品的角度：网站的受众，受众使用浏览器的比例，是功能优先还是效果优先。
- 成本的角度：预算是否足够，是否划得来。
- 做到什么程度：让哪些浏览器支持哪些效果？
- 如何做:
- 根据兼容需求选择技术框架/库
- 根据兼容需求选择兼容工具
- post CSS
- 条件注释、CSS hack、js能力检测做一些修补
3.列举5种以上浏览器兼容的写法
- 条件注释
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
- 不同的去浮动方式
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 仅对ie67有效 */
}
- 使用inline-block方式
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
- 属性前缀法
.hack{
/*注意顺序，否则IE6/7下可能无法正确显示，导致结果显示为白色背景*/
background-color:red; /* All browsers */
background-color:blue !important;/* All browsers but IE6 */
*background-color:black; /* IE6, IE7 */
+background-color:yellow;/* IE6, IE7*/
background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */
background-color:purple\0; /* IE8, IE9, IE10 */
background-color:orange\9\0;/*IE9, IE10*/
_background-color:green; /* Only works in IE6 */
*+background-color:pink; /* WARNING: Only works in IE7 ? Is it right? */
}
- 选择器前缀法
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
4. 以下工具/名词是做什么的
- 条件注释：是于HTML源码中被 Microsoft Internet Explorer 有条件解释的语句。条件注释可被用来向 Internet Explorer 提供及隐藏代码。
- IE Hack：使用特殊的符号或者方式写出只有IE浏览器可以解析的代码，有CSS属性前缀法、选择器前缀法以及IE条件注释法。
- js 能力检测：识别浏览器的能力，确定浏览器支持特定的能力，给出解决方案。
- html5shiv.js：用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
- respond.js：让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
- css reset：通过重新定义标签样式，“覆盖”浏览器的CSS默认属性
- normalize.css：在默认的HTML元素样式上提供了跨浏览器的高度一致性。保护了有价值的默认值，修复了浏览器的bug，模块化。
- Modernizr：判断浏览器是否支持某些HTML5/CSS3特性。
- postCSS：是一个使用 JavaScript 插件来转换CSS的工具，通过PostCSS这个平台，我们自己也能够开发一些插件，来处理CSS。
5.一般在哪个网站查询属性兼容性？
caniuse: 查询CSS属性兼容性
browserhack 查css属性 选择器在各浏览器Hack的写法
