0

对于网站：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>
4

2 回答 2

3

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

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

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

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

由于.banner元素不会拉伸父.slideshow容器以赋予其高度，因此您必须手动指定高度以匹配内容。在这种情况下215px，请注意按照我的评论使用 unit - 简单地说明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，因为他为您指出了正确的方向。

于 2013-02-10T20:40:20.140 回答
1

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

.slideshow{overflow:hidden;}
于 2013-02-10T06:48:59.287 回答