0

我下面的示例代码适用于除 ie9 之外的所有浏览器，在 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 中抛出了后续浮动。给你的水平导航 div 一个float: left;来修复。

除非您打算创建一个固定的标头，否则您应该始终让块级元素按照相同的定位规则播放。由于您正在使用float:left;其他块元素，因此这将在所有机器上修复，无论人们在随机浏览器中运行的奇怪配置如何。

于 2013-08-01T14:38:44.447 回答