首頁 > 開發者 > 網站開發

前端學習 -- Html&Css -- 條件Hack 和屬性Hack

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：isp   end   webkit   混淆   避免   one   文檔   保留   說明   

 條件Hack

文法：

<!--[if <keywords>? IE <version>?]>HTML代碼塊<![endif]-->

<keywords>

if條件共包含6種選擇方式：是否、大於、大於或等於、小於、小於或等於、非指定版本

是否：
指定是否IE或IE某個版本。關鍵字：空
大於：
選擇大於指定版本的IE版本。關鍵字：gt（greater than）
大於或等於：
選擇大於或等於指定版本的IE版本。關鍵字：gte（greater than or equal）
小於：
選擇小於指定版本的IE版本。關鍵字：lt（less than）
小於或等於：
選擇小於或等於指定版本的IE版本。關鍵字：lte（less than or equal）
非指定版本：
選擇除指定版本外的所有IE版本。關鍵字：!

<version>

目前的常用IE版本為6.0及以上，推薦酌情忽略低版本，把精力花在為使用進階瀏覽器的使用者提供更好的體驗上

用於選擇IE瀏覽器及IE的不同版本

  • if條件Hack是HTML層級的（包含但不僅是CSS的Hack，可以選擇任何HTML代碼塊）
<!--[if IE]><p>你在非IE中將看不到我的身影</p><![endif]-->

樣本demo:

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>if條件Hack_CSS參考手冊_web前端開發參考手冊系列</title><style>h1{margin:10px 0;font-size:16px;}span{display:none;}.not-ie{display:inline;}</style><!--[if IE]><style>.ie{display:inline;}.not-ie{display:none;}</style><![endif]--><!--[if IE 5]><style>.ie5{display:inline;}</style><![endif]--><!--[if IE 6]><style>.ie6{display:inline;}</style><![endif]--><!--[if IE 7]><style>.ie7{display:inline;}</style><![endif]--><!--[if IE 8]><style>.ie8{display:inline;}</style><![endif]--><!--[if IE 9]><style>.ie9{display:inline;}</style><![endif]--></head><body><div>    您正在使用    <span class="not-ie">非IE</span>    <span class="ie">IE</span>    <span class="ie5">5</span>    <span class="ie6">6</span>    <span class="ie7">7</span>    <span class="ie8">8</span>    <span class="ie9">9</span>    瀏覽器</div></body></html>

 

CSS 屬性 HACK

文法：

selector{<hack>?property:value<hack>?;}
_：
選擇IE6及以下。連接線（中劃線）（-）亦可使用，為了避免與某些帶中劃線的屬性混淆，所以使用底線（_）更為合適。
*：
選擇IE7及以下。諸如：（+）與（#）之類的均可使用，不過業界對（*）的認知度更高
\9：
選擇IE6+
\0：
選擇IE8+和Opera
[;property:value;];：
選擇webkit核心瀏覽器（Chrome,Safari）。IE7及以下也能識別。中括弧內外的3個分號必須保留，第一個分號前可以是任意規則或任意多個規則
[;color:#f00;]; 與 [color:#f00;color:#f00;]; 與 [margin:0;padding:0;color:#f00;]; 是等價的。生效的始終是中括弧內的最後一條規則，所以通常選用第一種寫法最為簡潔。

選擇不同的瀏覽器及版本

  • 儘可能減少對CSS Hack的使用。Hack有風險，使用需謹慎
  • 通常如未作特別說明，本文檔所有的代碼和樣本的預設運行環境都為標準模式。

  • 一些CSS Hack由於瀏覽器存在交叉認識，所以需要通過層層覆蓋的方式來實現對不同瀏覽器進行Hack的。

樣本：

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title></title><style>h1{margin:10px 0;font-size:16px;}.test{    color:#c30;          /* For Firefox */    [;color:#ddd;];      /* For webkit(Chrome and Safari) */    color:#090\0;        /* For Opera */    color:#00f\9;        /* For IE8+ */    *color:#f00;         /* For IE7 */    _color:#ff0;         /* For IE6 */}</style></head><body><div class="test">在不同瀏覽器下看看我的顏色吧</div></body></html>

 

 

 

 

前端學習 -- Html&Css -- 條件Hack 和屬性Hack

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More