Question

所以我正在试验纯粹的CSS布局，并立即陷入困境。我有以下html和css：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Layout</title>
        <link type="text/css" href="site.css" rel="stylesheet" >
    </head>
    <body>
        <div id="header">
            <a href="#" id="logo">My Site</a>

            <div id="search-area">
                <form>
                    <input type="text" id="search-box" />
                    <input type="submit" value="Search" />
                </form>
            </div>
        </div>

        <div id="sidebar">
            Account Name <br>
            <a href="#">Edit My Account</a>

        </div>
    </body>
</html>

#header {
    background-color: #151B54;
    height: 30px;
    width: 100%;
}

#logo {
    position: relative;
    left: 10px;
    color: white;
    font-size: x-large;
    font-weight: bold;
    text-decoration: none;
    float: left;
    margin-top: 3px;
}

#search-area {
    position: absolute;
    left: 200px;
    margin-top: 3px;
}

#sidebar {
    float: left;
    width: 100px;
    border-right: double;
}

当我在Chrome中查看此内容时，我得到了我期待的渲染：

然而，在IE中，我得到以下内容：

注意侧边栏左侧是否有一个巨大的空白区域。为什么在IE中显示？

Answer 1

我在Safari中遇到同样的问题并且出于同样的原因：你没有清除#header中的浮动，而#header不足以容纳所有浮动的孩子。< / p>

如果将标题的高度增加到31px，则应该（但可能不是）获得所需的布局。更好的方法是添加overflow: hidden作为明确修复，这将使#header的所有子项完全包含#header，这将阻止它们干扰下一个的布局片：

#header {
    background-color: #151B54;
    height: 30px;
    width: 100%;
    overflow: hidden;
}

实例：http://jsfiddle.net/ambiguous/EUmyN/

带有浮动元素的经验法则是始终确保它们在容器上使用overflow: hidden清除，或者在必要时使用容器底部的显式<div style="clear: both;"></div>清除。< / p>

此外，当我们在这里时，您很少需要width: 100%等块元素<div>。如果你正在定位或漂浮，那么也许你需要这样的东西，但不是普通的<div>;块元素默认为全宽。

Answer 2

尝试清除在线缓存。通常情况下，css文件被缓存并使用旧版本导致此类行为。

可能不是问题，但是在尝试解决样式上的意外结果时应该采取的第一个操作。

为什么我的基本css布局在Internet Explorer中呈现不正确？

2 个答案: