css - 带有 float 沙袋元素的 Chrome 问题

Question

我在 Chrome 中遇到问题，其中段落文本与 float 元素重叠。 float 元素被向下推以强制在容器的左下角显示图像。我已经设置了 http://jsfiddle.net/VMJGX/这重现了这个问题。文本与 Chrome 中的 .indenter 元素重叠，但在 Firefox 或 IE 中不重叠。这是 Chrome 错误还是有更好的方法来完成此操作？

Chrome 版本 21.0.1180.82

Firefox 版本 15.0

Answer 1

问题看起来是由于与段落中的行高相比高度不同，压头的顶部卡在了行的中间。我猜 FF 和 Chrome 渲染高度略有不同。如果您想继续使用您正在使用的相同方法，我建议您摆脱高度类样式，而只使用nbsp;填充压头 div，这样您获取与段落行高一致的高度。

Here's a fiddle with an example.

更新:

我更新了 fiddle 以使用 span 作为段落内的缩进(而不是 div)并将宽度属性放回原处。因为段落上的 margin-bottom 和 在压头上清除，您需要在压头上有匹配的边距底部，以便它们保持对齐。