css-hack

瀏覽器的兼容性——css-hack

css-hack誕生背景:

由於不同瀏覽器所遵循的標準也有所不同，再加上不可避免的程序bug、經濟利益等因素的干擾。同樣的網頁代碼(HTML + CSS)，在不同瀏覽器上的顯示效果卻略有不同，甚至大有不同。即使是同一個瀏覽器，其不同版本的顯示效果也有所不同，尤其是IE。這就給網頁前端設計人員帶來了很大的困擾。開發人員必須兼顧考慮到所有主流的瀏覽器，才能在不同的瀏覽器上顯示出相同或滿足需要的效果。

css-hack誕生使命:

CSS Hack技術，就是利用不同瀏覽器不同版本之間的CSS實現的特性差異，來滿足我們需要的效果：在所有主流瀏覽器上顯示統一的效果，或者爲特定瀏覽器顯示特定的效果。

---

for all ie——\9

• 由於ie版本能識別css屬性後綴\9，所以能它來爲ie添加獨特屬性，而其他標準瀏覽器（B）不能識別

• .css-hack {
      background-color: red; /* 其他瀏覽器上顯示爲紅色 */
      background-color: blue \9; /* 所有IE瀏覽器上顯示爲藍色 */
  }

for  ie 6（1）——_

• 爲css的屬性前面加下劃線_，這是給IE6專用的。

• .css-hack {
      background-color: red; /* 其他瀏覽器上顯示爲紅色 */
      _background-color: blue; /* 只有IE 6瀏覽器上顯示爲藍色 */
  }

for ie 6（2）——表達式

• IE 6不支持max-width屬性，但是IE6的css屬性值支持expression表達式。因此，我們可以爲IE 6 折中實現max-width的屬性效果。

• .css-hack {
      background-color: red;
      max-width: 200px;
      _width: expression( function(me){ var maxWidth = 200; me.style.width = (me.offsetWidth <= maxWidth ? me.offsetWidth : maxWidth) + "px"; }(this) ); /* _開頭只有IE6可以識別，出於性能考慮，此處的表達式只會執行一次 */
  }

for ie7(（1）——巧妙+→_

• IE6、IE7都能夠識別加了+、*或#前綴的css屬性名稱，但是IE 7不支持_前綴，而IE6支持。因此，我們可以先寫一個*屬性、+屬性或#屬性讓IE6、IE7都能識別，再寫一個_屬性，只讓IE6識別，將屬性值復原回去，從而讓前者只對IE 7生效。

• .css-hack {
      color: red; /* 其他瀏覽器上顯示爲紅色 */
      +color: blue; /* 只有 IE 6、IE 7 瀏覽器上顯示爲藍色 */
      _color: red; /* 讓 IE 6 復原爲之前設置的顏色 */
  }

for ie7（2）——*+html

• IE 7也支持在選擇器前添加*+html ，讓當前選擇器成爲*+html的後輩選擇器，只有IE 7可以識別此類樣式選擇器(據說某些舊版本的Opera瀏覽器也能識別，不過這些版本早已作古了，無需考慮)。

• .css-hack {
      color: red; /* 其他瀏覽器顯示紅色 */
  }
  *+html .css-hack {
      color: blue; /* 只有IE 7顯示藍色  */
  }

for ie7（2）——巧妙+→_

• IE 7也支持在選擇器前添加*+html ，讓當前選擇器成爲*+html的後輩選擇器，只有IE 7可以識別此類樣式選擇器(據說某些舊版本的Opera瀏覽器也能識別，不過這些版本早已作古了，無需考慮)。

• .css-hack {
      color: red; /* 其他瀏覽器顯示紅色 */
  }
  *+html .css-hack {
      color: blue; /* 只有IE 7顯示藍色  */
  }

for ie7（3）——*:first-child+html

• IE 7還支持在選擇器前添加*:first-child+html，讓當前選擇器成爲*:first-child+html的後輩選擇器。

• .css-hack {
      color: red; /* 其他瀏覽器顯示紅色 */
  }
  *:first-child+html .css-hack {
      color: blue; /* 只有IE 7顯示藍色  */
  }

for ie8——@media \0screen

• 只有IE8支持嵌套如下@media類型查詢語句：@media \0screen。

• .css-hack {
      color: red; /* 其他瀏覽器顯示紅色 */
  }
  
  @media \0screen {
      .css-hack { color: blue; } /* 只有IE 8顯示藍色 */
  }

---

for firefox——@-moz-document url-prefix()

• 只有IE8支持嵌套如下@media類型查詢語句：@media \0screen。

• .css-hack {
      color: red; /* 其他瀏覽器顯示紅色 */
  }
  
  @-moz-document url-prefix() {
      .css-hack {
          color: blue; /* 只有FireFox顯示爲藍色 */
      }
  }

for Webkit內核的瀏覽器——Chrome、Safari——@media screen and (-webkit-min-device-pixel-ratio:0)

• 只有IE8支持嵌套如下@media類型查詢語句：@media \0screen。

• .css-hack {
      color: red; /* 其他瀏覽器顯示紅色 */
  }
  
  @media screen and (-webkit-min-device-pixel-ratio:0) {
      .css-hack {
          color: blue; /* Webkit內核瀏覽器顯示藍色 */
      }
  }