IE10 CSS Hack（順便聊聊IE11的CSS Hack） – WEB前端開發

Web前端開發 ? 12年前掃碼分享

我是創始人李巖：很抱歉！給自己產品做個廣告，點擊進來看看。

<!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次

首發媒體

| 轉發媒體