Question

这真的很奇怪。当在FF中查看此页面时，它会在顶部获得一个白色条纹，这是身体的一部分 - 我知道因为我使用红色边框技术来查看元素。

任何想法为什么？ http://www.codecookery.com/allbestimages/index.php?main_page=home

Answer 1

问题是您的#slideshow元素绝对定位。这会将其从正常的页面流中删除，因此您的#main-page-body-wrapper基本上是空的，只是位于页面顶部。

我建议你避免绝对定位，除非你真的，确定你需要它。我建议做一些改变。首先摆脱绝对定位：

#slideshow {
    height: 541px; /* Height of the slideshow */
    position: relative;
    /* Remove width, left, top and margins from here */
}

上面的块中的

position: relative;将当前位置设置为绝对定位的任何子元素的起点（例如幻灯片图像）。如果这没有意义，请查看：

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

你在div和其他块级元素上不需要width: 100%，因为那是默认值，所以删除它：

#main-page-body-wrapper  {
    /* Remove width from here */
    text-align: center; /* IE6 centering Part 1 */
}

#main-page-inside-wrapper  {
    margin: 0 auto;
    overflow: hidden;
    padding: 10px 0 0;
    width: 1000px; /* Width of the slideshow */
    text-align: left; /* IE6 centering Part 2 */
}

我不明白你为什么在#content-wrapper内需要#main-page-inside-wrapper - 它看起来不像是在做什么。你应该尽量保持HTML的简单，以避免混乱和混乱;你真的需要2个div才能像你那样进行跨浏览器居中，如果我是你的话，我会摆脱#content-wrapper。

这绝不是一个完整的解决方案，但应该可以帮助您到达目的地。祝你好运！

Answer 2

解决方案是将填充/边距设置为0.我希望它可以帮助某人。

身体背景侥幸 - 在上面的白色空间

3 个答案: