0

以下の私のサンプル コードは、ie9 以外のすべてのブラウザーで動作します。（コピペすれば複製できると思います）

誰かが理由について私を助けてくれますか? CSSは私には問題ないようですか？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>TEST</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        <style type="text/css">
            body, html, form {
                padding:0;
                margin:0;
            }
            body {
                font-family:"Segoe UI",Tahoma,Helvetica,Sans-Serif;
                font-size:12px;
                color:#333333;

            }
            #container {
                min-width:1200px;
            }
            #horizontal-nav {
                background: #1AA2DE;
                width: 100%;
                height:41px;
            }
            #left-column {
                margin-top:10px;
                width:210px;
                float:left;
            }
            #center-column {
                float:left;
                width:180px;
                margin-top:10px;
            }
            #right-column {
                margin-top:10px;
                float:left;
                margin-left:10px;
            }
            /* TOP NAV */
            .hmenu,
            .hmenu ul {
                list-style: none;
                margin:0;
                padding: 0 0 0 20px;
            }
            .hmenu {
                font-size: 16px;
                float: left;
            }
            .hmenu > li {
                float: left;
            }

            .hmenu li a, .hmenu li span {
                display: block;

                padding: 10px 20px;
                text-decoration: none;
                color: #fff;
            }
            .hmenu > li:hover > a {
                background: #5EBEE8;
            }
</style>
    </head>
    <body>
        <div id="container">
            <div id="horizontal-nav">
                <ul class="hmenu">
                    <li><a href="javascript:;">Home</a></li>
                     <li><a href="javascript:;">About</a></li>
                     <li><a href="javascript:;">Contact</a></li>
                </ul>
            </div>
            <div id="left-column">
                <ul>
                     <li><a href="javascript:;">Link 1</a></li>
                     <li><a href="javascript:;">Link 2</a></li>
                     <li><a href="javascript:;">Link 3</a></li>
                     <li><a href="javascript:;">Link 4</a></li>
                     <li><a href="javascript:;">Link 5</a></li>
                </ul>
            </div>
            <div id="right-column">
                Right Content
            </div>
        </div>
    </body>
</html>

http://jsfiddle.net/isherwood/Wgtcy/

4

1 に答える 1

2

水平ナビゲーション div の配置により、IE9 のコンテナー div で後続のフロートが失われます。水平ナビゲーション divfloat: left;に修正を加えます。

固定ヘッダーを作成する予定がない限り、ブロック レベルの要素は常に同じ配置ルールで再生する必要があります。他のブロック要素に使用float:left;しているため、人々がランダムなブラウザーで実行している奇妙な構成に関係なく、これはすべてのマシンで修正されます。

于 2013-08-01T14:38:44.447 に答える