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指定宽度，并且没有浮动。当块级元素没有浮动，具有内容且没有指定宽度时，默认情况下它占用容器的100％。

因此，解决方案是废弃display:inline-block样式（因为它们不影响任何内容），将float:left添加到#header_text，然后就完成了！另外，您可以（但不必）指定#header_text的宽度。

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

Answer 2

花车可能有点挑剔。我建议使用绝对定位来完成这项任务。这些css属性会将标题设置为定位容器框，并将标题徽标设置为位于该框的右上角。

#header {
  position: relative;
}
#header_logo {
  position: absolute;
  top: 0;
  right: 0;
}

间歇性的div定位问题

2 个答案: