firefox問題與容器框的填充權

有一個容器與指定的背景顏色和填充。裏面有一個圖像。在全屏瀏覽器窗口中，它看起來應該是這樣的： http://img263.imageshack.us/img263/4792/61536769.png firefox問題與容器框的填充權

但是在調整窗口大小（窗口寬度小於內容寬度）和水平滾動條出現後，如果我向右滾動，我可以看到背景的結束位置的窗口結束： http://img845.imageshack.us/img845/7370/11506448.png

下面的代碼：

<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>

在IE8看起來正確，填充被視爲它的內容的一部分。在Firefox和Opera中，它不是，即使我使用「-moz-box-sizing：border-box」（和正確的文檔類型和一切...），所以我不知道我該怎麼做。我通常是用圖像的邊緣做的，但這次不能成爲一個解決方案（實際的東西不同於這個例子，但它顯示了確切的問題）。

感謝提前:)你的幫助

來源

2011-04-15 pogi

添加一個包裹您現有div的額外div，並且執行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>

編輯：刪除顯示：塊;因爲當你有浮動時，這是無關緊要的。

來源

2011-04-15 19:21:04 Jaspero

+1。試過這個，它工作。實際上，我擺脫了外部div，它仍然有效。浮動一個div就足夠了。有意義 - 浮動使元素的大小獨立於其父項。但我永遠不會想到這樣做。 – 2011-04-15 19:37:33

是啊，寬度：100％和float：left解決了問題:)謝謝 – pogi 2011-04-15 19:45:13

一兩件事你可以在這種情況下，做的是把特定寬度的DIV，以及：

<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>

你可以做，在這種情況下，因爲你已經知道內容的寬度。當然，如果你需要一個動態大小的div，這可能不適合你。

我打算建議把margin: 32px放在圖片上，而不是padding: 32px放在div上，但是當我嘗試它時也沒有幫助。的bizzare。

來源

2011-04-15 19:05:22

'overflow-y'是一個有效的CSS3屬性，scroll是一個有效的溢出選項。不管它對'body'有什麼好處是另一回事，但（我敢肯定它不會，因爲這個級別的溢出通常會激活瀏覽器的滾動條）。 – Shauna 2011-04-15 19:26:02

@Shauna - 你說得對。我忘記了'scroll'作爲一個值，因爲我從來不使用'auto'和'hidden'以外的任何東西。我從我的答案中刪除了不準確的信息。 – 2011-04-15 19:33:15

我知道那是怎麼回事。我自己通常使用'auto'，'hidden'，偶爾''visible'。 – Shauna 2011-04-15 19:43:20

發生什麼事是因爲圖像具有固定的寬度，div不會展開以環繞圖像，但div不會（因此默認爲父級的100％，即body/html在視口的100％處）。如果你用Firebug來看它，你可以看到圖像超出了div的邊界和填充。

我調整了此jsFiddle中的CSS以獲取背景以展開圖像。至少應該讓你開始。基本上，我所做的是將overflow-y: auto;添加到div，這擴大了背景。

來源

2011-04-15 19:21:39 Shauna

謝謝你的回答，但正如我所看到的，它不能解決Firefox中的問題，因爲這個瀏覽器仍然是越野車：S（在默認圖像查看這裏也有同樣的問題：在左上角你可以看到默認的8px填充，但是在右邊沒有什麼......） – pogi 2011-04-15 19:48:36

firefox問題與容器框的填充權

回答

相關問題