css - 间歇性的div定位问题

Question

我的网站上只有一个 div 时遇到了一个相当奇怪的问题。当页面首次加载时，这个特定的 div(下面代码中的 id=header_logo)比预期的低大约 100px。但是，当页面刷新时，div 返回到它应该的位置，靠近页面顶部。事实上，每次刷新页面时，div 都会出现在正确的位置。只有当我关闭选项卡/页面并重新打开或第一次打开时，才会出现问题。该问题似乎与基于 WebKit 的浏览器(如 Chrome 和 Safari)无关。 Firefox 呈现良好，而且奇怪的是，IE 也是如此。

Screenshot of the issue when it occurs

这里是 HTML

<div id="user_bar">
    </div>

    <div id="main_window">

        <div id="header" class=".gradient">
            <div id="header_text">
                <h1>Lab Connect</h1>
                <h3>Lab Resource Aggregator</h3>
            </div>

            <div id="header_logo">
                <a href="index.html">
                    <img src="./graphics/SS_Comm_labs.png" height="85" width="420" />
                </a>
            </div>
        </div>

这是CSS

body {
    background-image: url('../graphics/tactile_noise.png');
    background-repeat:repeat;
    /*background-color:#e7e8ed;*/
    font-family:helvetica;
    margin: 0%;
}

#user_bar {
    height:40px;
    background-color:#38393b;

}

#main_window {
    width:1200px;
    background-color:white;
    box-shadow:0px 5px 15px black;
    margin: 0px auto;
}

#header {
    height: 125px;
    background: #ffc578; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYzU3OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNzk0MjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #ffc578 0%, #f79422 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc578), color-stop(100%,#f79422)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffc578 0%,#f79422 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffc578 0%,#f79422 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffc578 0%,#f79422 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffc578 0%,#f79422 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#f79422',GradientType=0 ); /* IE6-8 */
    padding-bottom: 10px;
}

#header_text {
    margin-top: 15px;
    margin-left: 15px;
    color: white;
    display: inline-block;

}

h1 {
    margin: 0%;
}

h3 {
    margin: 0%;
}

#header_logo {
    width: 500px;
    height:110px;
    float:right;
    display:inline-block;
    background-color: white;
    border-bottom: .75px solid #FFA366;
    border-left: .755px solid #FFA366;
    border-bottom-left-radius: 25px;
    box-shadow: 2px -2px 10px #222222 inset;
}

#header_logo img {
    margin-left: 45px;
    margin-top: 5px;
}

当它坏了时，我确实检查了 Chrome 中的元素，但我没有看到任何计算样式会像这样将它向下推。

提前致谢

Answer 1

您没有为您的 #header_text div 指定宽度，它不是 float 的。 当 block 级元素不 float 、有内容且没有指定宽度时，默认占容器的 100%。

因此，解决方案是废弃 display:inline-block 样式(因为它们不影响任何东西)，将 float:left 添加到您的 #header_text，大功告成!此外，您可以(但不是必须)为您的 #header_text 指定宽度。

如果您认为从文档流中删除 div 是更好的选择，Chad von nau 的解决方案就是您的选择。