Question

我花了最后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中使用它。非常感谢！

Answer 1

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

Answer 2

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

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

IE8不尊重CSS规则覆盖

2 个答案: