IE等主流浏览器css hack 包括IE6,IE7,IE8,IE9,firefox,chrome

顺晟科技

2022-09-15 21:10:58

对于常用的hack，今天搜集了一下资料，好好的学习了一下，愚人码头的一个测试页面写得比较详尽，链接如下：http://www.fantxi.com/demo/html/browser_detector.html

然后我自己在本地进行了测试，沿用了愚人码头的背景配色，重写了css代码，最后还有一些额外的发现和收获。本次测试主要是针对IE6~IE9，firefox，chrome，opera，IE5.5如此古老的浏览器不在考虑之列。最后，特别注意的是：使用:root对IE9 hack的时候，还要在属性值后面加上”\0” or “\9”，否则FF和chrome下面和IE9的样式一样。而在opera下面只能加"\9",加"\0"的话跟IE9效果相同。

这里是从晚上搜集的一张图片，主要是IE下的hack

本地demo的html代码：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h3>css hack</h3>
        <div class="hack-box">
            <div class="demo">
                .demo的背景色会随浏览器的不同而变化哦，亲！
            </div>
        </div>
        <div class="detail">
            <ol>
            <li>IE6, 测试区域背景色为: <span style="background:#ccc">灰色(#ccc)</span></li>
            <li>IE7, 测试区域背景色为: <span style="background:#f60">橘色(#f60)</span></li>
            <li>Opera 9.5-9.6/FF 3.51-FF4, 测试区域背景色为: <span style="background:#f06">粉色(#f06)</span></li>
            <li>Safari,Google Chrome,Opera9.2, 测试区域背景色为: <span style="background:#609">紫色(#609)</span></li>
            <li>IE8, 测试区域背景色为: <span style="background:#09F">蓝色(#09F)</span></li>
            <li>IE9, 测试区域背景色为: <span style="background:#963">咖啡色(#963)</span></li>

            </ol>
            <p class="attention">使用:root对IE9 hack的时候，还要在属性值后面加上”\0” or “\9”，否则FF和chrome下面和IE9的样式一样。而在opera下面只能加"\9",加"\0"的话跟IE9效果相同</p>
        </div>

    </body>
</html>

css代码如下：

body {
                text-align: center;
            }
            .hack-box {
                margin: 0 auto;
                width: 300px;
                height: 200px;
                border: 3px solid #999;
            }
            .detail {
                margin: 0 auto;
                width:400px;
            }
            .attention {
                font-weight: bold;
                font-size: 20px;
            }
            :root .demo {
                background:#963\9; /* 仅IE9适用 */
            }
            .demo {
                width: 300px;
                height: 200px;
                background: #036; /* 所有浏览器都适用 */
                background: #09F\9; /* IE6~IE9 */
                background: #09F\0; /* IE8~IE9 */
                background: #09F\0/; /* IE8 */
                *background: #F60; /* IE6/IE7 */
                +background: #F60; /* IE6/IE7 */
                @background: #F60; /* IE6/IE7 */
                >background: #F60; /* IE6/IE7 */
                _background: #ccc; /* IE6 */
            }
            @media all and (min-width:0) {
                .demo {
                    background: #F06; /* webkit and opera */
                }
            }

            @media screen and (-webkit-min-device-pixel-ratio:0){
                .demo {background:#609;}/*webkit (& Opera9.2)*/
            }
            ol {
                list-style-type: none;
                text-align:left;
            }

最后还有一个针对safari和chrome的hack:

body:nth-of-type(1) #selector{
background:#ccc;
}

上一篇：css 滚动条样式下一篇：浏览器的兼容性（CSS浏览器兼容性、

网站建设

Css

IE等主流浏览器css hack 包括IE6,IE7,IE8,IE9,firefox,chrome