框架选择
- Bootstrap (>=ie8)
- jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
- Vue (>= ie9)
常见浏览器兼容情况
- inline-block: >= IE8
- min-width/min-height: >= IE8
- :before/:after : >= IE8
- :hover : >= IE7
- background-size: >=IE9
- 圆角： >= IE9
- 阴影： >= IE9
- 动画、渐变： >= IE10
1. 什么是 CSS hack
由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。
2. 处理浏览器兼容问题的思路
- 要不要做
- 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
- 成本的角度（有无必要做某件事）
- 做到什么程度
- 让哪些浏览器支持哪些效果
- 如何做
- 根据兼容需求选择技术框架/库（jquery）
- 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
- postCSS
- 条件注释、CSS Hack、js能力检测做一些修补
- 渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
- 优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
3. 列举5种以上浏览器兼容的写法
兼容性写法可参考borwserhacks
- IE条件注释
<!--[if lte IE 7]>
<style>
.test{color:red;}
</style>
<![endif]-->
//在上述代码中，只有IE7以下（含IE7），才能看到应用了test类的元素是红色文本。
- IE属性前缀
.selector{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie6-7*/
color: yellow\9; /*ie/edge 6-8*/
}
- IE选择器前缀：
*html{}/*ie6*/
*+html{}/*ie7*/
- 不同浏览器添加相应的属性前缀：
column-count: 2;
-moz-column-count: 2;
-weblit-column-count: 2;
- 利用和兼容相关的开发工具如Modernizr
首先你下载完你自定义的脚本以后，你就可以像引用普通js文件一样引用它了，然后就可以用了。
<script src="Scripts/Modernizr.js" type="text/javascript"></script>
运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例如:canvas,websockets），不支持的特性显示的class是“no-特性名称”（例如：no-flexbox）。下面这段代码是运行在Chrome下的效果：
<html class=" js flexbox canvas canvastext webgl no-touch geolocation
postmessage websqldatabase indexeddb hashchange history
draganddrop websockets rgba hsla multiplebgs backgroundsize
borderimage borderradius boxshadow textshadow opacity cssanimations
csscolumns cssgradients cssreflections csstransforms
csstransforms3d csstransitions fontface generatedcontent video audio
localstorage sessionstorage webworkers applicationcache
svg inlinesvg smil svgclippaths">
而在IE9里的效果是：
<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation
postmessage no-websqldatabase no-indexeddb hashchange no-history
draganddrop no-websockets rgba hsla multiplebgs backgroundsize
no-borderimage borderradius boxshadow no-textshadow opacity
no-cssanimations no-csscolumns no-cssgradients no-cssreflections
csstransforms no-csstransforms3d no-csstransitions fontface
generatedcontent video audio localstorage sessionstorage
no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
你还可以结合HTML5/CSS3特性一起使用
你可以直接使用Modernizr在元素里生成的class名称，在你的css文件里定义相应的属性以便支持当前浏览器。例如，下面的代码属性，在支持shadow阴影的浏览器显示shadow，不支持的浏览器显示标准的边框：
.boxshadow #MyContainer {
border: none;
-webkit-box-shadow: #666 1px 1px 1px;
-moz-box-shadow: #666 1px 1px 1px;
}
.no-boxshadow #MyContainer {
border: 2px solid black;
}
因为如果浏览器支持box-shadows的话，Modernizr就会将boxshadow class添加到元素，然后你可以将它管理到一个相应的div的id上。如果不支持，Modernizr就会将no-boxshadow class添加到元素，这样显示的就是一个标准的边框。这样我们就可以很方便地在支持CSS3特性的浏览器上使用CSS3新功能，不支持的浏览器上继续使用以前的方式。
4. 以下工具/名词是做什么的
1. 条件注释：
于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码；使用了条件注释的页面在IE9中可正常工作，但在IE10中无法正常工作，IE10不再支持条件注释；
2. IE Hack：
针对IE浏览器编写不同的CSS，让IE能够正常渲染的过程；
3. js 能力检测：
浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测；
4. html5shiv.js：
用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题；
5. respond.js：
Respond.js 是一个小脚本，用于为 IE6-8 以及其它不支持 CSS3 媒体查询功能的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计；
6. css reset：
将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式，“覆盖”浏览器的CSS默认属性；
7. normalize.css：
Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一，在默认的HTML元素样式上提供了跨浏览器的高度一致性；
8. Modernizr：
Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案；Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名；
9. postCSS：参考PostCSS
它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我的自动生成兼容性代码；
网友评论