浏览器兼容

浏览器兼容

什么是 CSS hack

由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。

谈一谈浏览器兼容的思路

• 要不要做
  1. BOSS是否有直接要求（是否能说服BOSS不做）
  2. 产品角度考虑（产品定位的受众是那些，根据效果和稳定性做取舍，选择体验优先还是稳定性优先）
  3. 成本（有无必要去做）
• 做到什么程度
  需要兼容哪些浏览器，兼容到什么版本
• 如何来做
  1. 根据兼容需求选择技术框架/库(jquery)
     Bootstrap (>=ie8)
     jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
     Vue (>= ie9)
  2. 根据兼容需求选择兼容工具
     html5shiv.js
     respond.js
     css reset
     normalize.css
     Modernizr
     postCSS
  3. 条件注释、CSS Hack、js 能力检测做一些修补
  4. 渐进增强和优雅降级的选择

列举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]-->

条件注释：

条件注释

• CSS hack

  1. 属性选择器

   box{
   color: red; 
   _color: blue; /*ie6*/
  *color: pink; /*ie67*/ 
   color: yellow\9; /*ie/edge 6-8*/}
  

  2. 选择器前缀法

   *html *前缀只对IE6生效
   *+html *+前缀只对IE7生效
     @media screen\9{...}只对IE6/7生效
  

  3. IE条件注释

  <!–-[if IE 7]>
  <link rel="stylesheet" href="ie7.css" type="text/css" />
  <![endif]–->
  

• 容器坍塌

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 仅对ie67有效 */
}

• inline-block属性

.target{
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

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

条件注释      /*条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码（IE10以上不再支持条件注释） */
IE Hack      /*主要是针对ie浏览器不同版本的特性，编写适应兼容不同ie浏览器的代码方案 */
js 能力检测      /*检测浏览器是否支持某种特定的能力，然后给出特定的解决方案 */
html5shiv.js      /* 用于解决ie低版本浏览器对HTML5新增标签不识别导致CSS不起作用的脚本*/
respond.js      /* 模拟css3的媒体查询，主要是解决ie低版本浏览器不支持媒体查询，解决低版本浏览器的响应式问题*/
css rese      /*重新定义标签样式，“覆盖”浏览器的CSS默认属性 */
normalize.css      /*可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一 */
Modernizr      /*modernizr是一套JavaScript库，可以用来检测浏览器对html5和css3的特性有哪些支持哪些不支持 */
postCSS      /*postcss是通过JavaScript语言对css语句进行处理，然后再用已选用的插件进行处理和显示 */

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

• 常用查询网站和工具的连接
  查询浏览器市场份额的网站
  查询css属性兼容性的网站
  查询Hack写法的网站
  stackoverflow-渐进增强和优雅降级的区别
  html5shiv.js
  respond.js
  css reset
  normalize.css
  Modernizr
  参考文章