執行個體講解符合中國特色的和網路現狀的實用CSS Hack(附源碼)

最後更新：2018-12-07 來源：互聯網

上載者：User

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

首先解釋一下標題的定語：

執行個體講解的：文章中會出現可以運行並可立即看到結果的執行個體代碼。
符合中國特色的：中國網民使用最多的瀏覽器是IE和FireFox。所以這些CssHack主要是為瞭解決這2種瀏覽器的相容問題。中國電腦使用者的作業系統主要是Windows，所以這些CssHack主要針對Windows作業系統瀏覽器，並不包含Mac等。
符合網路現狀的：現在網民中最多使用的瀏覽器是IE6（或者IE6核心的瀏覽器），其次是IE7（或者IE7核心的瀏覽器），再次是FireFox。所以這些CssHack主要是為瞭解決這3種瀏覽器的相容問題。
實用的：這些CssHack都是比較簡單而且有效。

多說兩句：

首先應該明確的是：盡量不要使用css hack，因為它的向後相容是未知的。
基於現在中國互連網的現狀,這裡主要對IE6，IE7和FF的最常用且實用的css Hack進行了介紹，但是並不表示css只有這些。（比較完整請訪問:CSS hack瀏覽器安全色一覽表）
有些其實已經不是css hack了，而是css的一些新的選取器，例如"#div1>#div2"和"#div1:first-child",對於這樣的選取器一般可以放心的使用，因為有較好的向後相容性。

本文

下面的CssHack在這些瀏覽器中有效:
下面的CssHack在這些瀏覽器中無效:#div1:first-child{
color:red;
}

#div1>#div2{
font-size:200%;
}

html[xmlns] #div2{
text-decoration:underline;
}

下面的CssHack在這些瀏覽器中有效:
下面的CssHack在這些瀏覽器中無效:#div2{
*border:2px solid red;
}

下面的CssHack在這些瀏覽器中有效:
下面的CssHack在這些瀏覽器中無效:#div2{
_width:100px;
}

* html #div2{
height:100px;
}

下面的CssHack在這些瀏覽器中有效:
下面的CssHack在這些瀏覽器中無效:*+html #div2{
background-color:yellow
}

下面是完整的代碼，你可以在不同的瀏覽器下瀏覽以便查看效果。<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Keywords" content="YES!B/S!" />
    <meta name="Description" content="This page is from http://Justinyoung.cnblogs.com" />
    <title>CSS/Javascript demo</title>
    <style type="text/css">
        *{
            font-size:medium;
            margin:2px;
            padding:2px;
        }
        /*
        valid    :    FF    IE7 OP8
        invalid    :    IE6
        */
        #div1:first-child{
            color:red;
        }
        #div1>#div2{
            font-size:200%;
        }
        html[xmlns] #div2{
            text-decoration:underline;
        }
        /*
        valid    :    IE6    IE7
        invalid    :    FF    OP8
        */
        #div2{
            *border:2px solid red;
        }

        /*
        valid    :    IE6
        invalid    :    FF    IE7
        */
        #div2{
            _width:100px;
        }
        * html #div2{
            height:100px;
        }
        /*
        valid    :    IE7
        invalid    :    FF    IE6
        */
        *+html #div2{
            background-color:yellow
        }
        /*Test Min-height*/
        #div3{
            border:1px dotted green;
            width:100px;
            /*min-height is valid in FF and IE7.
              it's very important for kill "auto height" problem*/
            min-height:100px;
            height:50px;
        }
    </style>
</head>
<body>
<div id="div1">
    <div id="div2">
     i'm test text.
    </div>
    <div id="div3">
        test min-height!
    </div>
    <p>
        首先應該明確的是：盡量不要使用css hack，因為它的向前相容是未知的。<br/>
        基於現在中國互連網的現狀,這裡主要對IE6，IE7和FF的最常用且實用的css Hack進行了介紹，但是並不表示css只有這些。<br/>
        有些其實已經不是css hack了，而是css的一些新的選取器，例如"#div1>#div2"和"#div1:first-child",對於這樣的選取器一般可以放心的使用，因為有較好的向後相容性。
    </p>
</div>
</body>
</html>

三種瀏覽器的最終：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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