代码之家  ›  专栏  ›  技术社区  ›  sarsnake

身体背景侥幸-顶部空白

css
  •  1
  • sarsnake  · 技术社区  · 15 年前

    这真的很奇怪。在FF中查看此页时,它的顶部会出现一条白色条纹,这是正文的一部分-我知道,因为我使用了红色边框技术来查看元素。

    知道为什么吗? http://www.codecookery.com/allbestimages/index.php?main_page=home

    3 回复  |  直到 15 年前
        1
  •  1
  •   Gabriel    15 年前

    尝试添加:

    #main-page-body-wrapper{
      height: 0px;
    }
    

        2
  •  0
  •   OrganicPanda    15 年前

    问题是你的 #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/

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

    #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尽可能简单,以避免混乱和混乱;你真的只需要两个div就可以做跨浏览器居中,就像你这样做,我会摆脱它 #内容包装器 如果我是你。

    这绝不是一个完整的解决方案,但应该有助于你达到你要去的地方。祝你好运!

        3
  •  0
  •   sarsnake    14 年前

    解决方法是将padding/margin设置为0。我希望它能帮助某些人。