什么是CSS hack?在 CSS 和 HTML里如何寫 hack?在 CSS 中 IE 7、IE 8的 hack 方式?

CSS hack:
由于不同廠商的流覽器或某瀏覽器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),對CSS的支持、解析不一樣,導致在不同瀏覽器的環境中呈現出不一致的頁面展現效果。這時,我們為了獲得統一的頁面效果,就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式,我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程,叫做CSS hack!

如何寫:

  • 屬性前綴法(即類內部Hack):例如 IE6能識別下劃線""和星號" ",IE7能識別星號" ",但不能識別下劃線"",IE6~IE10都認識"\9",但firefox前述三個都不能認識
  • 選擇器前綴法(即選擇器Hack):例如 IE6能識別html .class{},IE7能識別+html .class{}或者*:first-child+html .class{}
  • IE條件注釋法(即HTML條件注釋Hack):針對所有IE(注:IE10+已經不再支持條件注釋): ,針對IE6及以下版本: 。這類Hack不僅對CSS生效,對寫在判斷語句里面的所有代碼都會生效

IE7&IE8 hack:

  • 條件注釋:
<!--[if IE 7]>
這段文字只在IE7瀏覽器顯示
<![endif]-->
<!--[if IE 8]>
這段文字只在IE8瀏覽器顯示
<![endif]-->
  • 類內屬性前綴法


/*類內部hack:*/
    .header {_width:100px;}            /* IE6專用*/
    .header {*+width:100px;}        /* IE7專用*/
    .header {*width:100px;}            /* IE6、IE7共用*/
    .header {width:100px\0;}        /* IE8、IE9共用*/
    .header {width:100px\9;}        /* IE6、IE7、IE8、IE9共用*/
    .header {width:330px\9\0;}    /* IE9專用*/

/*選擇器Hack:*/
    *html .header{}        /*IE6*/ 
    *+html .header{}    /*IE7*/ 
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,815評論 1 92
  • 做前端多年,雖然不是經常需要hack,但是我們經常會遇到各瀏覽器表現不一致的情況。基于此,某些情況我們會極不情愿的...
    大女表哥閱讀 1,132評論 0 9
  • 原文地址:常見的CSS Hack 轉載請注明出處 什么是CSS hack 由于不同廠商的流覽器或某瀏覽器的不同版本...
    xiaoxiao昱閱讀 923評論 0 9
  • 一、如何調試 IE 瀏覽器? 在IE7以上的版本中可以通過按快捷鍵F12調出開發人員調試框,如下圖IE7以上調試工...
    dengpan閱讀 564評論 0 2
  • 什么是CSS hack? 由于不同廠商的流覽器或某瀏覽器的不同版本(如IE,Firefox/Safari/Oper...
    魔_術師閱讀 2,622評論 0 3