IE8不尊重CSS规则覆盖

时间:2014-06-27 18:03:26

标签: html css internet-explorer-8 override css-selectors

我花了最后2个小时才知道这件事,我不知道有什么不对,以及如何解决。

让我们假设以下HTML:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IE8 test</title>
    <link href="main.css" rel="stylesheet">
</head>
<body>
    <div id="myDiv">
        <p>First line - bla bla bla bla bla bla bla bla bla</p>
        <p>Second line - bla bla bla bla bla bla bla bla bla</p>
        <p class="red last">Third line - bla bla bla bla bla bla bla bla bla</p>
    </div>
</body>
</html>

这个CSS:

@charset "UTF-8";

#myDiv {
    border: 1px solid green;
}

#myDiv p {
    text-align: center;
}

#myDiv p:first-child {
    text-align: left;
}

#myDiv p.last, #myDiv p:last-child { /* THIS IS WHAT DOESN'T WORK IN IE8 */
    text-align: right;
}

.red {
    color: red;
}

显然,这应该将div中的所有文本居中,但是然后将第一行放在左边,将最后一行放在右边。它在新的浏览器中完美运行,但IE8失败了(哦,这真是一个惊喜......)。

似乎不尊重#myDiv p.last, #myDiv p:last-child。我添加了class="last",因为IE8并不知道last-child,但无论如何,text-align:center根本不会覆盖text-align:right。任何人都知道如何解决它?我真的需要在IE8中使用它。非常感谢!

2 个答案:

答案 0 :(得分:0)

:IE8不支持last-child。见这里:http://caniuse.com/#search=last-child

答案 1 :(得分:0)

您应该只在选择器中留下#myDiv p.last。由于IE8无法识别:last-child选择器表达式,因此它只会忽略整个规则(可能无效)。

这是一般的经验法则(由the standard规定):浏览器无法理解选择器=&gt;浏览器忽略它(以及相应的规则)。