CSS hack用法案例詳解

2021-08-19 19:00:29

之前一直很狹隘的對CSS hack持有偏見，覺得寫得規範的程式碼不應該使用這些「邪門歪道」，可最近產品釋出一個小問題卻讓我頭疼了很久，最後查了一下資料，竟然使用CSS hack輕鬆解決了，不得不服啊，對付神奇的IE就得使用這些利器。

什麼是CSS hack

由於不同的瀏覽器，甚至同一瀏覽器的不同版本對CSS的解析認識不一樣，導致生成的頁面效果不一致，寫出針對不同瀏覽器CSS code就稱為CSS hack。

常用的CSS hack 有三種方式，CSS 內部hack、選擇器hack、HTML 頭部參照，其中第一種最常用。

CSS 內部hack

正經的CSS是這麼寫的

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css" >
            .test
            {
                background-color:green;
            }
        </style>
    </head>
    <body>
        <div class="test" style="height:100px; width:100px; line-height:100px; margin:50px; border:1px solid #000;"></div>
    </body>
<html>

這樣的程式碼對於所有當前常用的瀏覽器都是好使的，結果應該是這樣子的

但是在CSS3中常見一些這樣的寫法

/*Mozilla核心瀏覽器：firefox3.5+*/
  -moz-transform: rotate | scale | skew | translate ;
 /*Webkit核心瀏覽器：Safari and Chrome*/
  -webkit-transform: rotate | scale | skew | translate ;
 /*Opera*/
  -o-transform: rotate | scale | skew | translate ;
 /*IE9*/
  -ms-transform: rotate | scale | skew | translate ;
 /*W3C標準*/
  transform: rotate | scale | skew | translate ;

如果沒有註釋乍一看還以為逆天了，這樣的程式碼都好使！這樣的程式碼確實好使，CSS3目前標準還沒有統一，各個瀏覽器都有自己的表現方式，甚至有的實現，有的未實現，在前面加一些字首以表示支援某個特定瀏覽器，這也是CSS 內部hack的基本原理，向上面這些簡單易懂，但是真正的CSS hack 遠遠不止於此，因為有不死的IE6及其各種奇葩的兄弟版本。

CSS 內部hack 語法是這樣的 selector{<hack>?property:value<hack>?;} ，上面程式碼所示的是在屬性名稱之前的hack，當然還有這樣的

*background-color:green;

屬性前面加個「*」這樣的寫法只會對IE6、7生效，其它版本IE及現代瀏覽器會忽略這條指令（沒有特殊說明，本文所有hack都是指在宣告了DOCTYPE的檔案的效果）

-background-color:green;

屬性前面有個「-」這樣的只有IE6識別，還有些在後面的hack

background-color:green!important;

這樣在屬性值後面新增「!important」的寫法只有IE6不能識別，其它版本IE及現代瀏覽器都可以識別，還有「+」、「」、」9」等，亂七八糟好煩，畫個表

這樣就清楚多了吧。如果只想給上面的test DIV在IE存取的時候加綠色背景，就可以這麼寫

background-color:green9;

如果想IE6紅色，IE7綠色，其它黃色（當然沒人這麼無聊）就可以這麼寫

background-color:green; +background-color:green; _background-color:green;

選擇器hack

選擇器hanck主要是針對IE瀏覽器，其實並不怎麼常用，語法是這樣的：<hack> selector{ sRules }

:root .test
{
    background-color:green;
}

HTML頭部參照

HTML頭部參照就比較特殊了，類似於程式語句，只能使用在HTML檔案裡，而不能在CSS檔案中使用，並且只有在IE瀏覽器下才能執行，這個程式碼在非IE瀏覽下非單不是執行該條件下的定義，而是當做註釋視而不見。

<!– 預設先呼叫css.css樣式表 –>
<link rel="stylesheet" type="text/css" href="css.css" rel="external nofollow"  />
<!–[if IE 7]>
<!– 如果IE瀏覽器版是7,呼叫ie7.css樣式表 –>
<link rel="stylesheet" type="text/css" href="ie7.css" rel="external nofollow"  />
<![endif]–>
<!–[if lte IE 6]>
<!– 如果IE瀏覽器版本小於等於6,呼叫ie.css樣式表 –>
<link rel="stylesheet" type="text/css" href="ie.css" rel="external nofollow"  />
<![endif]–>

lte：就是Less than or equal to的簡寫，也就是小於或等於的意思。

lt ：就是Less than的簡寫，也就是小於的意思。

gte：就是Greater than or equal to的簡寫，也就是大於或等於的意思。

gt ：就是Greater than的簡寫，也就是大於的意思。

! ：就是不等於的意思，跟javascript裡的不等於判斷符相同。

書寫順序

看看，看看，這麼多姿勢，那麼一個效果，好多種寫法，什麼順序寫才能保證各個瀏覽器都得到希望的效果呢？因為CSS只要是同一級別，出現重複屬性設定，後出現的會覆蓋前面出現的，所以在書寫的時候一般把識別能力強的寫前面，看個例子

_background-color:red;
background-color:green;

如果希望DIV在IE6上是紅色，其它是綠色，上面的寫法可不可以呢？試一下發現所有瀏覽器上都是綠色，因為在IE6解析的時候，第一句能夠識別，背景設為紅色，但是第二句所有瀏覽器都識別，IE6也不例外，背景顏色又被設為綠色，所以得反過來寫

background-color:green;
_background-color:red;

總結出的規律就是：先一般，再特殊。有興趣的同學可以試試試試下面CSS，看看和你想的效果是否一樣

background-color:blue; /*所有瀏覽器*/
background-color:red9;/*所有的ie*/
background-color:yellow; /* ie8+*/
+background-color:pink; /*+ ie7*/

到此這篇關於CSS hack用法案例詳解的文章就介紹到這了,更多相關CSS hack用法內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

CSS hack用法案例詳解

什麼是CSS hack

CSS 內部hack

選擇器hack

書寫順序

熱門文章