1

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

问题发生时的屏幕截图

这里的 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 中的元素，但我没有看到任何计算样式的元素会像这样将其向下推。

提前致谢

4

2 回答 2

1

您没有为您的#header_textdiv 指定宽度，并且它没有浮动。当块级元素不浮动、有内容且没有指定宽度时，默认占容器的 100%。

所以，解决方案是废弃display:inline-block样式（因为它们不会影响任何东西），添加float:left到你的#header_text中，你就完成了！此外，您可以（但不必）为您的#header_text.

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

于 2013-08-15T03:11:34.280 回答
0

浮动可能有点挑剔。我建议为此任务使用绝对定位。这些css属性会将header设置为定位容器框，并将header logo设置到该框的右上角。

#header {
  position: relative;
}
#header_logo {
  position: absolute;
  top: 0;
  right: 0;
}
于 2013-08-15T03:03:29.247 回答