Webkit not respecting margin-bottom if text extends off viewable screen
I'm trying to finish up the CSS and markup for my site (jonathanbuys.com), but I have this annoying issue to clear up. For pages that have all of the text horizontally viewable without scrolling, my margin-bottom is correctly set for 30px. However, as soon as the content exceeds the horizontal size of the browser window, the margin-bottom disappears.
I've tested this out using Firefox, Safari, Chrome, and the Webkit nightlies, and it seems to only happen with Webkit-based browsers.
Here is the relevant 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;
}
And the basic layout of the site:
<!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&开发者_如何学Cgt;
<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>
Any idea what I'm missing?
Thanks in advance.
There's probably some debatably-written passage in the spec that makes them handle it that way, or else it's just a bug in WebKit. If you add 1px bottom padding to body your bottom margin will be show up -- at least it does for after a tweak in the inspector, Chrome 6/OS X.
I probably just code it differently w/ padding or something usually, perhaps margin-collapse is messing you up.
-webkit-margin-collapse
Worth a shot.
加载中,请稍侯......
精彩评论