CSS hack

最新推荐文章于 2024-07-22 19:28:00 发布

liujian_laohan

最新推荐文章于 2024-07-22 19:28:00 发布

阅读量346

点赞数

CC 4.0 BY-SA版权

文章标签： hack

本文链接：https://blog.youkuaiyun.com/liujian573281/article/details/69331750

本文介绍了CSShack的概念、原理及其三种表现形式：CSS类内部Hack、选择器Hack和HTML头部引用(ifIE)Hack。并详细展示了三种CSShack的方式：条件注释法、类内属性前缀法和选择器前缀法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、CSS hack概念

不同厂商的浏览器（Internet Explorer,Safari,Mozilla Firefox,Chrome等），或者是同一厂商的浏览器的不同版本（IE6、IE7、IE8等），对CSS的解析认识不完全一样，就会导致生成的页面效果不一样。这时为了在不同浏览器环境下得到统一的页面效果，我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。

2、CSS hack原理

由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

3、CSS hack表现形式

CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack：

CSS类内部Hack：比如 IE6能识别下划线”_”和星号” * “，IE7能识别星号” *
“，但不能识别下划线”_”，而firefox两个都不能认识。等等
选择器Hack：比如 IE6能识别html .class{}，IE7能识别+html
.class{}或者*:first-child+html .class{}。等等
HTML头部引用(if IE)Hack：针对所有IE：<![endif]-->，针对IE6及以下版本：<![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

4、CSS hack方式

（1）方式一条件注释法
只在IE下生效

<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->

只在IE6下生效

<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->

只在IE6以上版本生效

<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->

只在IE8上不生效

<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->

非IE浏览器生效

<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->

（2）方式二类内属性前缀法
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。
IE浏览器各版本 CSS hack 对照表

hack

写法

实例

IE6(S)

IE6(Q)

IE7(S)

IE7(Q)

IE8(S)

IE8(Q)

IE9(S)

IE9(Q)

IE10(S)

IE10(Q)

*color

青色

+color

绿色

-color

黄色

_color

蓝色

#color

紫色

color:red\0

红色

\9\0

color:red\9\0

粉色

!important

color:blue !important;color:green;

棕色

说明：在标准模式中

“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .demo1{
                width: 200px;
                height: 200px;
                background-color: red;/* 所有浏览器*/  
                background-color: blue !important;/* 除了IE6以外所有浏览器 */
                *background-color:black; /* IE6, IE7 */  
                +background-color:yellow;/* IE6, IE7*/  
                background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */  
                background-color:purple\0; /* IE8, IE9, IE10 */  
                background-color:orange\9\0;/*IE9, IE10*/  
                _background-color:green; /* 只适用于IE6 */  
                *+background-color:pink; /*  只适用于IE7？ */
            }
        </style>
    </head>
    <body>
        <div class="demo1"></div>
    </body>
</html>