Question

下面的示例代码适用于除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/

Answer 1

horizontal-nav div的定位会抛弃IE9中容器div中的后续浮点数。给你的水平导航div float: left;进行修复。

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

ie9 float left实际上更靠近页面的中间

1 个答案: