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 は互換モードになり、互換モードでは、IE は>特にセレクターを認識しません。これは、他のブラウザーの quirks モードには影響しません。

于 2012-10-23T10:36:54.767 に答える