首页 > 代码库 > css hack

css hack

2024-10-06 06:49:39   218人阅读

什么是css hack

　　由于不同厂商的浏览器或某浏览器的不同版本(如IE6-IE11，Firefox,Safari，Opera，Chrome等)，对Css的支持，解析不一样，导致

在不同浏览器的环境中呈现出不一致的页面展现效果。这时，为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的css样式。

我们把这个针对不同的浏览器/不同版本写相应的css代码的过程，叫做css hack。

 

css hack的分类

　　CSS Hack大致有3种表现形式，CSS属性前缀法，选择器前缀法，以及IE条件注射法(即HTML头部引用if IE)Hack，实际项目中CSS Hack

大部分是针对IE浏览器不同版本之间的表现差异而引入的。

　　（1）属性前缀法（即类内部Hack）：例如IE6能识别下划线“_”和星号"*"，IE7能识别星号"*"，但不能识别下划线"_"，IE6~IE10都认识

"\9"，但是firefox前述三个都不认识。

　　　　　　1.属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

　　　　　　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+已经不再支持条件注释）：

<!--[if IE]>IE浏览器显示的内容<![endif]-->，针对IE6即以下版本：<!--[if lt IE 6]>只在IE6显示的内容<![endif]-->。这类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>

 

css hack


联系
我们