内容简介：前言：什么是浏览器兼容问题？同一份代码，有的浏览器效果正常，有的不正常。其实最主要就是对 IE 浏览器的兼容问题。可以大致分为：A 级兼容（chrome、firefox、IE9+）：要保证在最新浏览器上完美实现设计稿；B 级兼容（ie8）：能用且差别不大；
本文推荐 PC 端阅读~ 本文版权归 “公众号 | 前端一万小时” 所有，未经授权，请勿转载！ 复制代码
css_16 复制代码
1. 渐进增强和优雅降级分别是什么意思？ 2. 什么是 CSS hack？在哪个网站查看标签（属性）的浏览器兼容情况？ 3. IE6、7 的 hack 写法是？ 4. 尽可能多的列举浏览器兼容的处理范例？ 5. css reset 是什么？css 预编译器是什么？后编译器（post css）是什么？ 6. css reset 和 normalize.css 有什么区别？ 7. 尽可能多的写出浏览器兼容性问题？ 8. 如何让 Chrome 浏览器显示小于 12px 的文字？ 9. CSS 预处理器的比较：less、sass？ 10. 常见兼容性问题？ 复制代码
前言：什么是浏览器兼容问题？同一份代码，有的浏览器效果正常，有的不正常。其实最主要就是对 IE 浏览器的兼容问题。可以大致分为：
A 级兼容（chrome、firefox、IE9+）：要保证在最新浏览器上完美实现设计稿；
B 级兼容（ie8）：能用且差别不大；
C 级兼容（ie7 以下）：能用。
1 处理兼容问题的思路
首先以最大程度完善设计稿为基础，再考虑兼容性，不能盲目为了兼容问题而弃用方便简洁的新方法（如 html5、css3）；当然也不能用过新的技术方法使得兼容性过于低、实用性差。
渐进增强和优雅降级
1.1 渐进增强(progressive enhancement)
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
1.2 优雅降级 (graceful degradation)
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
1.3区别
- 优雅降级是从复杂的现状开始，并试图减少用户体验的供给；而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
- 降级（功能衰减）意味着往回看，而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
1.3.1 要不要做？
- 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
- 成本的角度 (有无必要做某件事)
1.3.2 做到什么程度？
- 让哪些浏览器支持哪些效果。
1.3.3 如何做？
（现阶段的前端工作，90% 都不需要去管 IE8 以下的兼容问题，工作重心最主要还是集中在 JS 。对于浏览器兼容不需要花太多精力，理解相关的解决思路就好了。）
- 根据兼容需求选择技术框架、库——用的时候留一个心眼就行：
Bootstrap (>=ie8) jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9) Vue (>= ie9) ... 复制代码
-
根据兼容需求选择兼容工具（html5shiv.js、respond.js、 css reset normalize.css**、Modernizr）；
-
postCSS ；
-
一些老的技术手段，如： 条件注释 （处理 IE 的方式）、 CSS Hack 、js 能力检测做一些修补。
1.4 条件注释
条件注释 (conditional comment) 是 HTML 源码中被 IE 有条件解释的语句。条件注释可被用来向 IE 提供及隐藏代码。
| 项目 | 范例 | 说明 |
|---|---|---|
| ! | [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 |
例：
<!--[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]--> 复制代码
:warning:使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中无法正常工作， IE10 不再支持条件注释。
1.5 CSS hack
（用一些奇怪的手段达到兼容的方式！）
由于不同厂商的浏览器，比如 Internet Explorer、Safari、Mozilla Firefox、Chrome 等，或者是同一厂商的浏览器的不同版本，如 IE6 和 IE7，对 CSS 的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的 CSS ，让它能在不同的浏览器中也能得到我们想要的页面效果。
常见hack写法：
（:bulb: browserhacks.com查 Hack 的写法）
.box {
color: red;
_color: blue; /*ie6 下它生效*/
*color: pink; /*ie67 下它生效*/
color: yellow\9; /*ie/edge 6-8 下它生效*/
}
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
复制代码
2 常见属性的兼容情况
| 属性名 | 兼容性 |
|---|---|
| inline-block | >=ie8 |
| min-width/min-height | >=ie8 |
| ::before, ::after | >=ie8 |
| div:hover | >=ie7 |
| inline-block | >=ie8 |
| background-size | >=ie9 |
| 圆角 | >=ie9 |
| 阴影 | >=ie9 |
| 动画/渐变 | >=ie10 |
（:bulb:caniuse.com查 CSS 属性兼容）
3 常见兼容处理范例
.clearfix:after {
content: '';
display: block;
clear: both;
}
.clearfix {
*zoom: 1; /* 仅对ie67有效 */
}
复制代码
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
复制代码
<!--[if lt IE 9]>
<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]-->
复制代码
<!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]--> 复制代码
4 一些处理兼容的 工具 总结
4.1 条件注释
条件注释 (conditional comment) 是于 HTML 源码中被IE有条件解释的语句。条件注释可被用来向 IE 提供及隐藏代码。
条件注释最初于微软的 Internet Explorer 5 浏览器中出现，并且直至 Internet Explorer 9 均支持。微软已宣布于 IE10 停止支持。
4.2 IE Hack
针对 IE 浏览器编写不同的 CSS 的让 IE 能够正常渲染的过程。
4.3 js 能力检测
使用 JS 的语法检测浏览器支持的属性，以便展示效果。
4.4 html5shiv.js
用于解决 IE9 以下版本浏览器对 HTML5 新增标签不识别，并导致 CSS 不起作用的问题。所以我们在使用过程中，想要让低版本的浏览器，即 IE9 以下的浏览器支持，那么这款 html5shiv.js 是一个非常好的选择！
4.5 respond.js
Respond.js 是一个小脚本，用于为 IE6-8 以及其它不支持 CSS3 媒体查询功能的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计。
4.6 css reset
将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式，“覆盖”浏览器的 CSS 默认属性。
4.7 normalize.css
Normalize.css 只是一个很小的 CSS 文件，但它在默认的 HTML 元素样式上提供了跨浏览器的高度一致性。相比于传统的 CSS reset ，Normalize.css 是一种现代的、为 HTML5 准备的优质替代方案。 Normalize.css 是一个可以定制的 CSS 文件，它让不同的浏览器在渲染网页元素的时候形式更统一。
:rocket:它可以：
- 保留有用的默认值，不同于许多 CSS reset 的简单粗暴全部抹掉；
- 标准化的样式，适用范围广的元素；
- 纠正错误和常见的浏览器的不一致性；
- 一些细微的改进，提高了易用性；
- 使用详细的注释来解释代码。
4.8 Modernizr
Modernizr 是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。
Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
Modernizr 会在页面加载后立即检测特性，然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。
（:trophy::warning:以下知识点我们会在“ 前端综合 ”里边专门用一篇文章来讲解，目前我们先熟悉相关概念，不必深究！）
4.9 后编译 PostCSS
它提供了一种方式用 JavaScript 代码来处理 CSS 。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。
:bulb:简单来说：它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将 CSS 解析成抽象语法树，通过 PostCSS 这个平台，我们能够开发一些插件来处理 CSS 。热门插件如 autoprefixer ，它可以帮我们处理兼容问题，只需正常写 CSS ，autoprefixer 可以帮我们自动生成兼容性代码。
:bulb:与 PostCSS 相关的知识点：“ CSS 预编译器 ”——预编译器的作用是增强了 CSS 语法，让我们可以在 CSS 中使用变量、循环、嵌套等功能，主要代表是 Less、Sass 、Stylus ，它们本质上就是一种编译器。
后记：对于浏览器兼容我们主要还是理解这个处理思路，熟悉一些范例，然后在实际写页面的过程中有选择的去复用即可。
加油！
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
破茧成蝶：用户体验设计师的成长之路
刘津、李月 / 人民邮电出版社 / 2014-7 / 69.00
市面上已经有很多专业的用户体验书籍，但解决用户体验设计师在职场中遇到的众多现实问题的图书并不多见。本书从用户体验设计师的角度出发，系统地介绍了其职业生涯中的学习方法、思维方式、工作流程等，覆盖了用户体验设计基础知识、设计师的角色和职业困惑、工作流程、需求分析、设计规划和设计标准、项目跟进和成果检验、设计师职业修养以及需要具备的意识等，力图帮助设计师解决在项目中遇到的一些常见问题，找到自己的职业成长......一起来看看 《破茧成蝶：用户体验设计师的成长之路》 这本书的介绍吧!
