铬忽略当第一次加载页面或刷新

Question

的网站DIV的高度。当我第一次使用Chrome打开我的页面时，导航栏会忽略我的标题栏并弹出到顶部，将其隐藏在标题下。如果点击主页链接，此问题会自行修复，但如果我刷新，则会重新出现。如果检测到Chrome，我尝试强制重新加载（但那不是太聪明，因为它只是一个循环）。我试图添加填充到横幅格与

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。

相对定位的元素仍然被认为是文档中元素的正常流向 。相反，绝对定位的元件 取出流程，因此在放置其他元件时不会占用空间。

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

如果你选择，你会看到.slideshow div有零个像素的高度，你的开发工具的样子。如果你浮动.banner div，也会发生这种情况，这就是我问的原因。如果您在构建页面时没有使用任何开发工具来检查页面，我建议您查阅您最喜爱的浏览器的文档，因为您会发现它们对于查看“隐藏内容”所发生的情况是非常宝贵的。 Chrome尤其具有出色的工具，Opera的蜻蜓和Mozilla（包括内置的开发工具和优秀的Firebug扩展）都获得了极高的评价。

由于.banner元素不会拉伸父级.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; 
} 

这也包括更新，我在评论中提到您的保证金性质。

我会信贷defau1t，因为他指出你在正确的方向为答案。

Answer 2

你可以添加一个CSS属性overflow:hidden;给包含横幅的div，

.slideshow{overflow:hidden;}