css hack

時間 2019-11-20

標籤 css hack 欄目 CSS 简体版

原文原文鏈接

什麼是css hackcss

　　因爲不一樣廠商的瀏覽器或某瀏覽器的不一樣版本(如IE6-IE11，Firefox,Safari，Opera，Chrome等)，對Css的支持，解析不同，致使html

在不一樣瀏覽器的環境中呈現出不一致的頁面展示效果。這時，爲了得到統一的頁面效果，就須要針對不一樣的瀏覽器或不一樣版本寫特定的css樣式。瀏覽器

咱們把這個針對不一樣的瀏覽器/不一樣版本寫相應的css代碼的過程，叫作css hack。spa

css hack的分類firefox

　　CSS Hack大體有3種表現形式，CSS屬性前綴法，選擇器前綴法，以及IE條件注射法(即HTML頭部引用if IE)Hack，實際項目中CSS Hackcode

大部分是針對IE瀏覽器不一樣版本之間的表現差別而引入的。htm

　　（1）屬性前綴法（即類內部Hack）：例如IE6能識別下劃線「_」和星號"*"，IE7能識別星號"*"，但不能識別下劃線"_"，IE6~IE10都認識blog

"\9"，可是firefox前述三個都不認識。it

　　　　　　1.屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴，以達到預期的頁面展示效果。class

　　　　　　2.在標準模式中

　　　　　　　　-1."_"下劃線IE6識別

　　　　　　　　-2."*"星號IE7識別

　　　　　　　　-3."\9" IE6~IE10都識別

　　　　　　　　-4.「\0」 IE8~IE10都識別

　　　　　　　　-5.「\9\0」只對IE9/IE10識別

　　（2）選擇器前綴法（即選擇器Hack）：例如IE6能識別*html.class{}，IE7能識別* + html.class{}或者*.first-child + html.class{}

　　　　　　1.選擇器前綴法是針對一些頁面表現閉一隻或者須要特殊對待的瀏覽器，在css選擇器前加上一些只有在某些特定瀏覽器才能識別

　　　　　　的前綴進行hack，並不經常使用。

　　　　　　2.目前常見的是：

　　　　　　　　-a.*html*前綴只對IE6生效

　　　　　　　　-b.*+html*+前綴只對IE7生效

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        *html .one{
            /*解決IE6三像素問題*/
            margin-right: -3px;
        }
        .one{
            float: left;
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            /*解決IE6三像素問題*/
            _margin-right: -3px;
        }
        .two{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="one">i am div1</div>
    <div class="two">i am div2</div>
</body>
</html>

　　（3）IE條件註釋法（即HTML條件註釋Hack）：針對全部IE（注：IE10+已經再也不支持條件註釋）：

，針對IE6即如下版本：。這類Hack不只對

CSS生效，對寫在判斷與距裏面的全部代碼都會生效。

　　　　　　1.只在IE下生效：

<!--[if IE]>

　　　　　　　　　　　　這段文字只在IE瀏覽器顯示

　　　　　　　　　　　　<![endif]-->

　　　　　　2.只在IE6下生效：

<!--[if IE 6]>

　　　　　　　　　　　　這段文字只在IE6瀏覽器顯示

　　　　　　　　　　　　<![endif]-->

　　　　　　3.只在IE6以上版本生效：

<!--[if gte IE 6]>

　　　　　　　　　　　　這段文字只在IE6及以上版本IE瀏覽器顯示

　　　　　　　　　　　　<![endif]-->

　　　　　　4.只在IE8不生效

<!--[if !IE 8]>

　　　　　　　　　　　　這段文字在非IE8瀏覽器顯示

　　　　　　　　　　　　<![endif]-->

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--[if IE]>
    hello
    <![endif]-->
</body>
</html>

1. css hack hack
2. CSS之CSS hack
3. CSS Hack
4. CSS HACK
5. css hack
6. CSS hack
7. css HACK
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。