浏览器兼容

CSS hack

由于不同浏览器对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。此时，我们需要针对不同的浏览器写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果

• 表现形式

  1. 属性前缀法（类内部Hack）：例如 IE6能识别下划线“”和星号“”，IE7能识别星号“”，但不能识别下划线“”，IE6~IE10都能识别“\9”，但 Firefox 对之前提到的三个都不能识别
  2. 选择器前缀法（选择器Hack）
  3. IE条件注释法（HTML条件注释Hack）：
     • 针对IE10之前的版本（IE10+不再支持条件注释）

     • IE6及以下

     这类Hack不仅对CSS生效，还对写在判断语句里的所有代码都有效

  示例

    .box{
      color: red;
      _color: blue; /*ie6*/
      *color: pink; /*ie7*/
      color: yellow\9; /*ie/ed*/
    }
    
    
  

---

浏览器兼容的思路

1. 要不要做（为什么）

   • 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
   • 成本的角度（有无必要做某件事）

2. 做到什么程度

   • 让哪些浏览器支持哪些效果

3. 如何做

   • 根据兼容需求选择支持哪些技术框架/库（jQuery）
   • 根据兼容需求选择兼容工具（html5shiv.js、respond.js、css reset、normalize.css、Modernizr）
   • postCSS
   • 条件注释、CSS Hack、js 能力检测做一些修补

---

常见的需要兼容的属性

• inline-block IE8+
• min-width/min-height IE8+
• :before, :after IE8+
• div:hover IE7+
• background-size IE9+
• border-radius IE9+
• box-shadow IE9+
• 动画、渐变 IE10+

示例

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

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

---

名词解释

• 条件注释：HTML代码中被IE有条件解释的语句
• IE Hack：使用特定的符号或者方式使得特定的IE浏览器展示特定的效果
• js 能力检测：使用js检测浏览器支持的属性，以便编写样式展示效果
• html5shiv.js IE6~8无法识别HTML5提出的新元素，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式，html5shiv执行createElement方法使css样式应用在未知元素上
• respond.js 可在IE6~8上模拟CSS3的媒体查询Media queries
• css reset 强制重置元素的默认样式，使页面在所有浏览器下效果一致
• normalize.css 强制重置元素默认样式的同时，保护有用的浏览器默认样式、提供一般化的样式、修复浏览器自身的bug、优化CSS可用性、解释代码
• Modernizr 检查浏览器是否支持 CSS3 或者 HTML5 的特性而自动添加一些类名（class）到 ，并替换掉原来的 .no-js
• postCSS 使用JavaScript插件来转换CSS的工具，负责把CSS代码解析成抽象语法树结构（Abstract Syntax Tree,AST）, 再交由插件来进行处理

---

常用的查询兼容性的网站

caniuse