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

Web前端開發(fā) ? 12年前掃碼分享

我是創(chuàng)始人李巖：很抱歉！給自己產(chǎn)品做個(gè)廣告，點(diǎn)擊進(jìn)來看看。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>無標(biāo)題文檔</title>
    <!--[if !IE]><!-->
    <script>
        // 針對(duì)IE10
        if (/*@cc_on!@*/false) {
            document.documentElement.className += ' ie' + document.documentMode;
        }
        // 針對(duì)IE11及非IE瀏覽器，
        // 因?yàn)镮E11下document.documentMode為11，所以html標(biāo)簽上會(huì)加ie11樣式類；
        // 而非IE瀏覽器的document.documentMode為undefined，所以html標(biāo)簽上會(huì)加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>

// 針對(duì)IE10

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

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

}

// 針對(duì)IE11及非IE瀏覽器，

// 因?yàn)镮E11下document.documentMode為11，所以html標(biāo)簽上會(huì)加ie11樣式類；

// 而非IE瀏覽器的document.documentMode為undefined，所以html標(biāo)簽上會(huì)加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>

本文被轉(zhuǎn)載1次

首發(fā)媒體

| 轉(zhuǎn)發(fā)媒體