Webkit 文本重叠浮动元素答案

【问题标题】：Webkit text overlapping floated elementsWebkit 文本重叠浮动元素
【发布时间】：2012-06-28 03:34:28
【问题描述】：

我试图让文本以不规则的形状流动，并以我认为应该起作用的方式使用空浮动：

    <!DOCTYPE HTML>
    <html>
        <head>
            <style type='text/css'>
                .leftspacer { height:10px; background-color:red; float:left; clear:left;}
                #container { width:100px; font-size:9px;}
            </style>
        </head>
        <body>
            <div id='container'>
                <div class='leftspacer' style='width:10px;'></div>
                <div class='leftspacer' style='width:20px;'></div>
                <div class='leftspacer' style='width:30px;'></div>
                <div class='leftspacer' style='width:40px;'></div>
                <div class='leftspacer' style='width:50px;'></div>
                <div class='leftspacer' style='width:40px;'></div>
                <div class='leftspacer' style='width:30px;'></div>
                <div class='leftspacer' style='width:20px;'></div>
                <div class='leftspacer' style='width:10px;'></div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus felis id odio porta facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut suscipit euismod vulputate. Vivamus a enim sit amet dui aliquam semper ac sit amet metus.
            </div>
        </body>
    </html>

（托管在http://pastehtml.com/view/b9fetgtmk.html）

它在 Firefox 甚至 IE9 中运行良好，但在 webkit 浏览器（Safari Win 5.1 和 Chrome 14.0.835.187）中，我发现文本在 div.leftspacer 元素周围没有正确流动。您可以看到一些文本被绘制在垫片的红色背景之上。看起来每行文本的位置仅针对每个字符的顶部像素计算，而不是字符的整个高度。

这似乎是一个错误。我对吗？也许有人可以建议我做错了什么，更重要的是，有什么解决方法吗？

编辑：我应该指定：我希望能够在浮动周围流动不同大小的文本，因此不能固定到任何特定的字符/行高。

【问题讨论】：

标签： html css webkit css-float

【解决方案1】：

如果设置行高和字体，似乎效果更好：http://jsfiddle.net/cWXge/

这在 Ubuntu 的 Firefox 和 Chrome 中看起来相同。

【讨论】：

True，将 line-height 设置为与垫片相同的高度将起作用。但是，我稍微简化了我的示例，因为我希望能够以不同的行高流动文本，例如嵌入的
标签，所有文本行高都不是 10px 的倍数；参见例如jsfiddle.net/JwXke/28

标签，所有文本行高都不是 10px 的倍数；参见例如jsfiddle.net/JwXke/28