firefox issue with the padding-right of the container box
there's a container with background-color and padding specified. there's an image inside it. in a full screen browser window it looks like as it should look like: http://img263.imageshack.us/img263/4792/61536769.png
but after resizing the window (window width is less than the content width) and the horizontal scrollbar appears, if i scroll it right, i can see the background ends where the window ends: http://img845.imageshack.us/img845/7370/11506448.png
here's the code:
<body style="margin: 0; padding: 0; overflow-y: scroll;">
<div style="background: pink; padding: 32px; display: block;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</body&g开发者_JAVA百科t;
in ie8 it looks right, the padding is treated as it's part of the content. in firefox and in opera it isn't, even if i use the "-moz-box-sizing: border-box;" (and correct doctype and everything...) so i don't really know what should i do. i usually did it with margin for the image but this time that can't be a solution (the actual thing is different than this example, but it shows the exact problem).
thanks for your help in advance :)
Add an extra div that wraps your existing div and do float:left.
<body style="margin: 0; padding: 0; overflow-y: scroll;">
<div style="background-color: pink; width:100%;float:left;">
<div style="background: pink; padding: 32px; float:left;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</div>
</body>
Edit: Removing display: block; as that's irrelevant when you have float.
What's going on is that the div isn't expanding to wrap around the image, since the image has a fixed width, but the div doesn't (and is therefore defaulting to 100% of the parent, which is body/html at 100% of the viewport). If you look at it with Firebug, you can see that the image is going outside of the bounds of the div and its padding.
I've tweaked the CSS in this jsFiddle to get the background to expand to the image. It should at least get you started. Basically, what I did was add overflow-y: auto; to the div, which expanded the background.
One thing you can do in this case is to put a specific width on the div as well:
<body style="margin: 0; padding: 0;">
<div style="background: pink; padding: 32px; display: block; width: 640px;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</body>
You can do that in this case because you already know the width of the contents. Of course, if you need a dynamically sized div this might not work for you.
I was going to suggest putting margin: 32px on the image instead of padding: 32px on the div, but when I tried it that didn't help either. Bizzare.
加载中,请稍侯......
精彩评论