1. 什么是 CSS hack
Hack是针对不同浏览器去写不同的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不同的浏览器写不同的CSS CODE的过程就叫做CSS Hack。然后将Hack放在浏览器特定的CSS文件中，让符合条件的浏览器去解析这些代码，符合条件的就解析，不符合的就不解析，从而达到所需要的页面渲染效果。总的一句话来说就是使用CSS Hack将会使你的CSS代码部分失去作用，然后借助条件样式，使用其原CSS代码在一些浏览器解析，而CSS Hack代码在符合条件要求的浏览器中替代原CSS那部分代码。
2.谈一谈浏览器兼容的思路
主要从三个方面去考虑：
- 要不要去做？
主要从产品的角度和成本的角度去考虑；产品的角度来说我们要考虑清楚产品的使用群体，以及受众的浏览器比例，从中分析我们需要效果优先还是功能优先。从成本的角度分析，就是我们做某个功能值不值得，有没有必要，付出和收获是否不成比例。 - 如果做，做到什么程度？
具体到需要让那些浏览器支持哪些效果，在不同的浏览器侧重点也不同。
例如：渐进增强和优雅处理。
渐进增强是指针对低版本浏览器进行页面构建，保证最基本的功能，在这基础上补充一些高级浏览器的效果，功能，交互；
优雅降级：针对高级浏览器，构建完整的功能，再针对低版本的浏览器去做一些兼容。 - 如何去做？
根据兼容的需求选择不同的技术或框架（比如jQuery） - Bootstrap;
- jQuery 1.~(>=ie6),jQuery 2.~(>=ie9);
- Vue(>=ie9);
- ....
根据兼容需求选择兼容工具(html5shiv.js , respond.js , css.reset , normalize.css , Modernizr)
postCSS
条件注释 CSS Hack js能力检测做一些修补。
3.列举5种以上浏览器兼容的写法
条件注释：
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
| 项目 | 范例 | 说明 |
| :------: | :------: |
| ! | [if !IE] | 非IE |
| lt | [if lt IE 5.5] | 小于IE 5.5 |
| lte | [if lte IE 6] | 小于等于IE6 |
| gt | [if gt IE 5] | 大于 IE5 |
| gte | [if gte IE 7] | 大于等于IE7 |
| 或| [if (IE 6)或(IE 7)] | IE6或者IE7 |
CSS Hack:
CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
常见的Hack写法：
.box{
//属性前缀法
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
//选择器前缀法
.ie7 .clearfix{
zoom: 1;
}
//IE条件注释法
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
属性兼容问题：
常见的属性兼容情况如下：
- inline-block: >=ie8
- min-width/min-height: >=ie8
- :before,:after: >=ie8
- div:hover: >=ie7
- inline-block: >=ie8
- background-size: >=ie9
- 圆角: >= ie9
- 阴影: >= ie9
- 动画/渐变: >= ie10
常见处理范例如下：
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 仅对ie67有效 */
}
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
4.以下工具/名词是做什么的
- 条件注释
条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。（IE10不再支持条件注释）。 - IE Hack
专门准对IE浏览器不同版本间的兼容性问题的处理，使之能够渲染出想要的效果。 - js 能力检测
是指js中兼容性问题的一些封装。通过js封装函数或对象来解决浏览器的兼容问题。 - html5shiv.js
用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。使用Javascript来使不支持HTML5的浏览器支持HTML标签。利用脚本document.createElement(“”)创建对应的脚本，CSS选择器便可正确应用到该标签。 - respond.js
Respond.js 是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计。（Responsive Web Design） - css reset
HTML标签在浏览器中都有默认的样式，例如p标签有上下边距，strong标签有字体加粗样式等。不同浏览器的默认样式之间存在差别，例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容问题，影响开发效率。解决方法其中之一是开始就将浏览器的默认样式全部覆盖掉，这就是CSS reset。 - normalize.css
Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。- 它可以保留有用的默认值，不同于许多 CSS 的重置
- 标准化的样式，适用范围广的元素。
- 纠正错误和常见的浏览器的不一致性。
- 一些细微的改进，提高了易用性。
- 使用详细的注释来解释代码。
- Modernizr
Modernizr是一个检测用户浏览器HTML5和CSS3能力的JavaScript库。Modernizr在页面加载时快速运行来检测功能；之后它会创建一个保存检测结果的JavaScript对象，然后为你页面中的html标签上添加一系列class属性来接通你的CSS。
Modernizr支持大量的测试和可选地包括YepNope.js来视情况加载外部的js和css资源。 - postCSS
PostCSS 是使用 JS 插件来转换 CSS 的工具，支持变量，混入，未来 CSS 语法，内联图像等等。PostCSS是CSS变成JavaScript的数据，使它变成可操作。PostCSS是基于JavaScript插件，然后执行代码操作。PostCSS自身并不会改变CSS，它只是一种插件，为执行任何的转变铺平道路。
网友评论