Question

我正在尝试为我的网站（jonathanbuys.com）完成CSS和标记，但我有这个烦人的问题需要清理。对于所有文本在不滚动的情况下可水平查看的页面，我的页边距正确设置为30px。但是，只要内容超过浏览器窗口的水平大小，边距底部就会消失。

我已经使用Firefox，Safari，Chrome和Webkit nightlies测试了这一点，而且似乎只发生在基于Webkit的浏览器上。

以下是相关的CSS：

   #wrapper{
 width: 720px;
 height: auto;
 margin: 30px auto 30px auto;
 padding: 3em 3em 3em 3em;
 border: 1px solid #ccc;
 text-align: left;
 background: white;
 -webkit-box-shadow: 2px 2px 8px #aaa;
 -moz-box-shadow: 2px 2px 8px #aaa;
 box-shadow: 2px 2px 8px #aaa;
}

网站的基本布局：

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="/css/style.css" type="text/css" />
</head>
 <body>
 <div id="wrapper">  

   <div id="sidebar">
    <div id="logobox">
    </div> 

    <div id="pages">
    </div> 
   </div> 

   <div id="content">
    <h2>Heading</h2>
    <p class="thin_line"></p>

    <div id="post">
     text
    </div>
   </div> <!-- End of content div -->

   <div id="footer">
    <p class="thin_line"></p>

   </div>
 </div>
 </body>
</html>

知道我缺少什么吗？

提前致谢。

Answer 1

规范中可能存在一些可解释性写入的段落，使得它们以这种方式处理它，否则它只是WebKit中的一个错误。如果向body添加1px底部填充，则会显示底部边距 - 至少在检查器Chrome 6 / OS X中进行调整后会显示。

Answer 2

我可能只是用不同的填充或其他方式编写代码，也许边缘崩溃会搞砸你。

-webkit余裕崩溃

值得一试。

如果文本延伸到可视屏幕之外，Webkit不尊重margin-bottom

2 个答案: