前端必知：33.css的hack_css hack-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52799985/article/details/131998773

CSShack是为了解决不同浏览器间CSS支持差异的技术，包括针对IE的条件注释和特殊符号hack，例如*用于IE10+，-_对IE6-7生效，9针对IE9等。通过这些方法，开发者能确保网站在各种浏览器中展现一致的样式。

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

一.什么是css hack

在前端开发中，CSS hack是一种常用的技巧，用于解决不同浏览器之间对CSS属性、选择器或特性支持的差异。通过使用CSS hack，可以针对特定的浏览器或浏览器版本提供特定的样式规则，以确保在不同浏览器中获得一致的显示效果。

二.css hack的作用及目的

css hack:由于不同的浏览器厂商，比如ie ，火狐，谷歌，safari（苹果）等，他们在生产浏览器的时候，会有不同的解决方案。还有不同版本浏览器也可能对相同的css 设置渲染不同的效果，列如 TE 6 7 8 9

CSS HACK. 是浏览器厂商给自己的浏览器专门制定的css指令。可以理解为css hack 的目的就是解决不同浏览器的css兼容问题，当然也可以使用csshack为不同的浏览器指定不同的css

三.ie的条件注释

[if IE]:只要是ie浏览器都生效

[if lete IE 6]:浏览器的版本大小等于ie6的时候生效

[if lt IE 6]:浏览器的版本小等于ie6的时候生效

[if get IE 6]:浏览器的版本大大等于ie6的时候生效

[if gt IE 6]:浏览器的版本大于等于ie6的时候生效

[if IE 6]:浏览器的版本等于ie6的时候生效

[endif]:条件注释的结束指令

[if ! IE 6]:浏览器的版本不是ie6的时候生效

四.特殊符号 hack

* 在IE10 及其以上生效

- 减号只对ie6 生效

+ 加号对ie7 生效

_ 下划线，对ie6 ie7 生效

\9 对IE 6 7 8 9 10 都生效

\0 对IE 8 9 10 都生效

\9\0 只对IE9 生效

相关代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/o2.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wp{
            width: 200px;
            height: 200px;
            background: rgb(60, 40, 139);
            /* *background: #04be02; */
            background: #04be02\0;
        }
    </style>
    <!-- [if IE9]
         <style>
            .wp{
                background:#04be02;
            }
         </style>
    
    
    <![endif]-->
    
</head>
<body>
    <!-- 
        css hack:由于不同的浏览器厂商，比如ie ，火狐，谷歌，safari（苹果）等
        他们在生产浏览器的时候，会有不同的解决方案。还有不同版本浏览器也可能
        对相同的css 设置渲染不同的效果，列如    TE 6 7 8 9
        CSS HACK. 是浏览器厂商给自己的浏览器专门制定的css指令。可以理解为css hack 的目的就
        是解决不同浏览器的css兼容问题，当然也可以使用csshack为不同的浏览器指定不同的css

        ie的条件注释
        [if IE]:只要是ie浏览器都生效
        [if lete IE 6]:浏览器的版本大小等于ie6的时候生效
        [if lt IE 6]:浏览器的版本小等于ie6的时候生效
        [if get IE 6]:浏览器的版本大大等于ie6的时候生效
        [if gt IE 6]:浏览器的版本大于等于ie6的时候生效
        [if IE 6]:浏览器的版本等于ie6的时候生效
        [endif]:条件注释的结束指令
        [if ! IE 6]:浏览器的版本不是ie6的时候生效

        特殊符号 hack
        * 在IE10 及其以上生效
        - 减号只对ie6 生效
        + 加号 对ie7 生效
        _ 下划线，对ie6 ie7 生效
        \9 对IE 6 7 8 9 10 都生效
        \0 对IE 8 9 10 都生效
        \9\0 只对IE9 生效

     -->
     <div class="wp"></div>
</body>
</html>