1

那么我有以下html：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Gallery</title>
        <link href="style.css" rel="stylesheet" />
    </head>
        <body>
        <div>
            <ul class="Boxes">
                <li>
                    <span>Nature</span>
                </li>
                <li class="Add">
                    <div></div>
                </li>
            </ul>
        </div>
    </body>
</html>

和以下CSS：

body {
    background: black;
    color: white;
}
body .Boxes li {
    width: 192px;
    height: 192px;
    font-size: 2.5em;
    background: rgb(27, 161, 226);
}
body .Boxes li.Add div {
    background-position: 0px -352px;
    width: 192px;
    height: 192px;
    background-image: url("Sprites.png");
    background-repeat: no-repeat;
    background-color: transparent;
}
.Boxes {
    list-style-type: none;
    float: left;

}
.Boxes li {
    margin: 10px; border: 0px currentColor;
    float: left;
    display: block;
    list-style-type: none;
}

现在这很好用，但是如果我将“body .Boxes li.Add div {”行更改为“body .Boxes li.Add > div {”，那么它在 IE9 中停止工作，我不知道为什么？注意：它仍在 Opera、Chrome 中运行。

4

1 回答 1

6

因为您缺少 doctype 声明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

没有它，IE9 将进入 quirks 模式，在 quirks 模式下，IE 将无法识别>选择器等。这不会影响其他浏览器中的怪癖模式。

于 2012-10-23T10:36:54.767 回答