html - Chrome 在页面首次加载或刷新时忽略 div 的高度

Question

对于网站:http://dev.blackboxdesign.co

我在使用 Chrome 时遇到了一个相当令人沮丧的问题。当我第一次用 Chrome 打开我的页面时，导航栏会忽略我的横幅栏并弹出到顶部，将自己隐藏在横幅下面。如果我单击主页链接，此问题会自行解决，但如果我刷新，则会重新出现。如果检测到 Chrome，我尝试过强制重新加载(但这不是很聪明，因为它只是循环)。我尝试使用

向横幅 div 添加填充

    padding-bottom:1px;

但后来我遇到了同样的问题，只是这次横幅没有显示。我在这里读到有同样问题的人说这与 Chrome 想要图像大小有关。但是我无法定义图像大小，因为它们会随着页面宽度的变化而变化。

HTML

    <div class="slideshow">
        <div id="banner_bar1"><img src="images/banner5.jpg" width="750px" height="178px" class="banner"></div>
        <div id="banner_bar2"><img src="images/banner4.jpg" width="750px" height="178px" class="banner"></div>
        <div id="banner_bar3"><img src="images/banner3.jpg" width="750px" height="178px" class="banner"></div>
        <div id="banner_bar4"><img src="images/banner2.jpg" width="750px" height="178px" class="banner"></div>
    </div>

CSS

#banner_bar1 {
    margin-top: 0px;
    width: 100%;
    background-color:#313131;
}
/* repeat #banner_bar1 for 2,3,4 changing only background-color */
.slideshow {
    margin:0px;
    padding:0px;
}
.banner {
    display:block;
    max-width: 1300px;
    min-width: 750px;
    width: 90%;
    margin: 0px auto;
}

哦，我忘了说这个问题也会在窗口调整大小时自行解决，这要归功于:

    <script language="javascript" type="text/javascript">
        function Reload(){
            window.location.href = window.location.href
        }
        window.onresize = Reload;
    </script>

Answer 1

由于 .slideshow 的 .banner 子元素应用了绝对位置，大概是由于您正在使用的循环插件，这些元素不构成文档的一部分流 - 也就是说这些 div 和子图像不会为 .slideshow 容器提供任何高度。

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements.

参见 https://developer.mozilla.org/en-US/docs/CSS/position

如果您查看您选择的开发人员工具，您会看到 .slideshow div 的高度为零像素。如果您 float .banner div，也会发生同样的情况，这就是我问的原因。如果您在构建页面时不使用任何开发人员工具来检查页面，我建议您查阅您最喜欢的浏览器的文档，因为您会发现它们对于了解“幕后”发生的事情绝对是无价的。 Chrome 尤其拥有出色的工具，Opera 的 dragonfly 和 Mozilla(内置的开发人员工具和出色的 Firebug 扩展)获得了极其荣誉的提名。

由于 .banner 元素不会拉伸(stretch)父级 .slideshow 容器来为其提供高度，因此您必须手动指定高度以匹配内容。在这种情况下 215px，请注意根据我的评论使用单位 - 简单地说明 215 将不起作用，或者至少不能跨浏览器正常工作。

我建议在您的外部 CSS 文件中执行此操作，我将其编辑为如下内容-

#banner_bar1 {
    margin-top: 0;
    width: 100%;
    background-color: #313131;
}

/* repeat #banner_bar1 for 2,3,4 changing only background-color */
.slideshow {
    height: 215px;
    margin:0px;
    padding:0px;
}

.banner {
    display:block;
    max-width: 1300px;
    min-width: 750px;
    height:100%;
    width: 90%;
    margin: 0 auto;
    padding-bottom: 0;
}

这还包括我在评论中提到的对您的 margin 属性的更新。

我将相信 defau1t，因为他为您指明了正确的答案方向。