IE10 CSS Hack（顺便聊聊IE11的CSS Hack） – WEB前端开发

Web前端开发 • 11年前扫码分享

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <!--[if !IE]><!-->
    <script>
        // 针对IE10
        if (/*@cc_on!@*/false) {
            document.documentElement.className += ' ie' + document.documentMode;
        }
        // 针对IE11及非IE浏览器，
        // 因为IE11下document.documentMode为11，所以html标签上会加ie11样式类；
        // 而非IE浏览器的document.documentMode为undefined，所以html标签上会加ieundefined样式类。
        if (/*@cc_on!@*/true) {
            document.documentElement.className += ' ie' + document.documentMode;
        }
    </script>
    <!--<![endif]-->
    <style type="text/css">
        .ie10 .testclass {
            color: red
        }
        .ie11 .testclass {
            color: blue
        }
        .ieundefined  .testclass {
            color: green
        }
    </style>
</head>

<body>
<div class="testclass">
    test text!
</div>
</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>无标题文档</title>

// 针对IE10

if (/*@cc_on!@*/false) {

document.documentElement.className += ' ie' + document.documentMode;

}

// 针对IE11及非IE浏览器，

// 因为IE11下document.documentMode为11，所以html标签上会加ie11样式类；

// 而非IE浏览器的document.documentMode为undefined，所以html标签上会加ieundefined样式类。

if (/*@cc_on!@*/true) {

document.documentElement.className += ' ie' + document.documentMode;

}

</script>

.ie10 .testclass {

color: red

}

.ie11 .testclass {

color: blue

}

.ieundefined .testclass {

color: green

}

</style>

</head>

<body>

test text!

</div>

</body>

</html>

本文被转载1次

首发媒体

| 转发媒体