浏览器兼容

2017-10-17 本文已影响26人 74f4321c3397

什么是CSS hack

由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。

简单来说，就是利用不同浏览器对不同css的识别不同这个bug，在css中加入兼容各个浏览器的css写法。

谈一谈浏览器兼容的思路

要不要做
- 产品的角度（产品的用户，用户的浏览器比例，效果优先还是基本功能优先），比如用户是政府部分或者电商，用户不同，功能也不同，效果和体验的优先级也不同
- 从成本的角度去考虑，有没有必要去做这个事情
做的什么程度，看成本，有没有必要。
如何做
- 根据兼容需求选择技术框架/库（jquery），低版本的ie对应不同的库等
- 根据兼容需求选择兼容工具（heml5shiv.js、respond.js、css reset、normalize.css、modernizr），比如如果要一些bootstrap的话最低也要ie8，用jquery的话，ie6、7支持到1.x的版本，ie8以上才支持2.0，如果是vue.js的话最少也要ie9才支持。
- 选择适合的工具后，再根据不同的兼容方案，如果比较难兼容的，就保持渐进增强的原则，先维持正常的可用功能实现，再针对其他浏览器兼容做更优秀的改动。如果是比较容易的兼容，就保持优雅降级的原则，先构建完整版本，再去兼容其他不好解决的兼容。

知道浏览器兼容的思路，比如知道如何去兼容ie6的思路，比具体去兼容去做重要的多。了解了思路之后，再去caniuser查CSS属性兼容，去BrowserHacks查Hack的写法，兼容的写法，具体去实现就可以了。

列举5种以上浏览器兼容的写法

范例1

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 对于ie6、7浏览器，由于不兼容伪元素，需要加上下面的才可以生效 */
}

范例2

.target{
  display: inline-block;
  *display: inline; /* 对于ie6、7不兼容inline-block，所以需要加上下面这两句才生效*/
  *zoom: 1;   /*这个顺序是不能变得*/
}

范例3

 <!--[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

<!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]-->

范例5

color:red;    ⁄* 所有浏览器都支持 *⁄ 
  color:red !important;   ⁄* Firefox、IE7支持 *⁄
  _color:red;   ⁄* IE6支持 *⁄
  *color:red;   ⁄* IE6、IE7支持 *⁄
 *+color:red;   ⁄* IE7支持 *⁄
 color:red \9;   ⁄* IE6、IE7、IE8支持 *⁄
 color:red \0;   ⁄* IE8支持 *⁄

以下工具/名词是做什么的

条件注释：针对不同的IE版本做出不同的注释，这个注释只能被ie10以下的浏览器识别，用来写对应ie版本的css，比如上面的范例3和范例4。
IE Hack：针对不同的IE浏览器编写不同的CSS让IE能够正常渲染的过程
js能力检测：js 能力检测浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。
himl5shiv.js：创建ie6、7、8上可以模拟使用html5标签的js库 github。对不同的ie版本，为IE6-8通过使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前大多网站采用的这种方式（Bootcss官方例子也是如此）。另外利用脚本document.createElement(“”)创建对应的脚本，CSS选择器便可正确应用到该标签。IE9是支持html5的，直接在HTML页面的head标签中添加脚本引用即可。
respond.js：在ie6、7、8上模拟css媒体查询的js库 github。主要为 IE6-8 以及其它不支持 CSS3 Media Querie 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计（Responsive Web Design）
css reset: html默认标签中许多元素有自己的样式，在实际使用过程中往往会有与其他css冲突的地方，通过css reset重新为这些元素设置符合自己需求的css就称为css reset。比如常见的 *{margin：0；padding ：0；}
normalize.css：css reset经过一段时间的发展，css reset的滥用情况越来越不符合实际的使用，就诞生了normalize.css, 是一种改良版的css reset 。
Modernizr：一个探测html5 和css特性的js库，用于替代ie条件注释，可以自动检测不同浏览器兼容性，给标签加上不同的class。它既能给老版本浏览器打补丁，又能保证新浏览器渐进增强的用户体验。
postCSS：它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我的自动生成兼容性。

一般在哪个网站查询属性兼容性？

caniuse