Chrome浮動沙袋元素問題

我在Chrome中遇到問題，其中段落文本與浮動元素重疊。浮動元素被向下推動以迫使容器左下角的圖像。我已經設置了http://jsfiddle.net/VMJGX/，它重現了這個問題。文本與Chrome中的.indenter元素重疊，但不包含在Firefox或IE中。這是一個Chrome錯誤還是有更好的方法來完成這個？Chrome浮動沙袋元素問題

的Chrome版本21.0.1180.82

火狐15.0版

來源

2012-08-30 aroemen

你只是想獲得一種方式來包裝圖像的文字？ – DigTheDoug

是的，它是圍繞圖像包裝文字。 – aroemen

的問題看起來是你的壓頭的頂部被抓到，因爲在不同高度的線的中間相比，在該linehieght段。我猜FF和Chrome渲染高度略有不同。如果你想繼續使用你正在使用的同樣的方法，我會建議擺脫高度班的風格，而不是隻使用nbsp;來填充壓頭div，這樣你就可以得到與段落的行高一致的高度。

Here's a fiddle with an example.

UPDATE：

我更新由於邊距的使用跨度作爲壓頭（代替的div）該段內，把寬度屬性回到撥弄。的段落和明確在壓頭上，你需要一個匹配的邊界底部的參與者，所以他們將保持對齊。

來源

2012-08-30 21:27:10 DigTheDoug

我發現當段落之間出現中斷時，我仍遇到問題。在這裏擺弄：http://jsfiddle.net/58fkC/1/ – aroemen

嗯，你說得對。我會再看一個不同的解決方案。 – DigTheDoug

我相信，由於您對縮進商品有明確的規定，因此您必須在最後一個縮進商品上匹配段落的保證金。它有點糟糕，但我不確定它會以任何其他方式與段落的邊距一起工作。我更新了小提琴：http://jsfiddle.net/digthedoug/58fkC/ – DigTheDoug

Chrome浮動沙袋元素問題

回答

相關問題