瀏覽器兼容

什么是 CSS hack

由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認(rèn)識不完全一樣，因此會導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果。這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。

談一談瀏覽器兼容的思路

• 要不要做
  1. BOSS是否有直接要求（是否能說服BOSS不做）
  2. 產(chǎn)品角度考慮（產(chǎn)品定位的受眾是那些，根據(jù)效果和穩(wěn)定性做取舍，選擇體驗(yàn)優(yōu)先還是穩(wěn)定性優(yōu)先）
  3. 成本（有無必要去做）
• 做到什么程度
  需要兼容哪些瀏覽器，兼容到什么版本
• 如何來做
  1. 根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
     Bootstrap (>=ie8)
     jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
     Vue (>= ie9)
  2. 根據(jù)兼容需求選擇兼容工具
     html5shiv.js
     respond.js
     css reset
     normalize.css
     Modernizr
     postCSS
  3. 條件注釋、CSS Hack、js 能力檢測做一些修補(bǔ)
  4. 漸進(jìn)增強(qiáng)和優(yōu)雅降級的選擇

列舉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瀏覽器不同版本的特性，編寫適應(yīng)兼容不同ie瀏覽器的代碼方案 */
js 能力檢測      /*檢測瀏覽器是否支持某種特定的能力，然后給出特定的解決方案 */
html5shiv.js      /* 用于解決ie低版本瀏覽器對HTML5新增標(biāo)簽不識別導(dǎo)致CSS不起作用的腳本*/
respond.js      /* 模擬css3的媒體查詢，主要是解決ie低版本瀏覽器不支持媒體查詢，解決低版本瀏覽器的響應(yīng)式問題*/
css rese      /*重新定義標(biāo)簽樣式，“覆蓋”瀏覽器的CSS默認(rèn)屬性 */
normalize.css      /*可以定制的CSS文件，它讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一 */
Modernizr      /*modernizr是一套JavaScript庫，可以用來檢測瀏覽器對html5和css3的特性有哪些支持哪些不支持 */
postCSS      /*postcss是通過JavaScript語言對css語句進(jìn)行處理，然后再用已選用的插件進(jìn)行處理和顯示 */

一般在哪個網(wǎng)站查詢屬性兼容性

• 常用查詢網(wǎng)站和工具的連接
  查詢?yōu)g覽器市場份額的網(wǎng)站
  查詢css屬性兼容性的網(wǎng)站
  查詢Hack寫法的網(wǎng)站
  stackoverflow-漸進(jìn)增強(qiáng)和優(yōu)雅降級的區(qū)別
  html5shiv.js
  respond.js
  css reset
  normalize.css
  Modernizr
  參考文章