css hack

关注

原创最新推荐文章于 2026-10-04 10:21:41 发布 265 阅读 AI 写同款· GEO 优化 ›

CSS hack方式一览做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。可是啊，现实太残酷，浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协，虽然这只是个别情况。今天，结合自己的经验和理解，做了几个demo把IE6~IE10和其他标准浏览器的CSS hack做一个总结，也许本文应该是目前最全阅读详情

常用的CSS hack方式
（1）方式一 条件注释法
只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
（2）方式二 类内属性前缀法
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。
“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
CSS hack方式三：选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
方式二 类内属性前缀法的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *> p{
            color: pink; //chrome
        }
        :root p{
            color:yellow\9;//IE9
        }
        p{
           color:blue\0;//IE8
        }


        P{
            *color:red; //IE7
        }

        p{
            _color:green; //IE6
        }

    </style>
</head>
<body>

<p>hello,everyone！i am turboemily,great to greet you!</p>

</body>
</html>