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

由于.banner的{{1}}子项已经应用了绝对位置，可能是您使用的循环插件，这些元素不构成文档流程的一部分 - 也就是说这些div和子图像不会给.slideshow容器增加任何高度。

相对定位的元素仍然被认为是在文档中元素的正常流动。相比之下，一个元素绝对定位的是从流程中取出并因此占用放置其他元素时没有空间。

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

如果您查看所选的开发人员工具，您会看到.slideshow div的高度为零像素。如果你漂浮.slideshow div，就会发生同样的情况，这就是我问的原因。如果您在构建页面时没有使用任何开发人员工具来检查页面，我建议您查阅您喜欢的浏览器的文档，因为您会发现它们绝对非常宝贵，可以看到“幕后”发生了什么。特别是Chrome拥有出色的工具，Opera的蜻蜓和Mozilla（内置的开发工具和出色的Firebug扩展）获得了极高的荣誉。

由于.banner元素不会拉伸父.banner容器以赋予其高度，因此您必须手动指定高度以匹配内容。在这种情况下.slideshow，请注意根据我的评论使用单位 - 只是说明215px无效，或者至少无法跨浏览器正常工作。

我建议在外部CSS文件中执行此操作，我将编辑该文件，如下所示 -

这还包括我在评论中提到的保证金属性的更新。

我要说服defau1t，因为他指的是你正确的答案。

Answer 2

您可以将CSS属性overflow:hidden;添加到包含横幅的div

.slideshow{overflow:hidden;}

当页面首次加载或刷新时，Chrome会忽略div的高度

2 个答案: