Webkit文本重叠的浮动元素

Question

I am trying to get text to flow in an irregular shape, and have used empty floats in a manner which I think ought to work: 我试图使文本以不规则的形状流动，并以我认为应该起作用的方式使用了空的浮点数：

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

(Hosted at http://pastehtml.com/view/b9fetgtmk.html ) （托管在http://pastehtml.com/view/b9fetgtmk.html ）

It works OK in Firefox, and even IE9, but in webkit browsers (Safari Win 5.1 and Chrome 14.0.835.187) I find that the text does not flow correctly around the div.leftspacer elements. 它在Firefox甚至IE9中都可以正常运行，但是在webkit浏览器（Safari Win 5.1和Chrome 14.0.835.187）中，我发现div.leftspacer元素周围的文本无法正确流动。 You can see that some text is drawn over the top of the red background of the spacers. 您会看到一些文本在间隔符的红色背景上方绘制。 It looks like the position of each line of text is only being calculated for the top pixel of each character, and not the whole height of the characters. 似乎只针对每个字符的顶部像素而不是字符的整个高度计算文本的每一行的位置。

It seems like it is a bug. 似乎是一个错误。 Am I right? 我对吗？ Maybe someone can suggest what I am doing wrong, and more importantly, is there any workaround? 也许有人可以建议我做错了，更重要的是，有什么解决方法吗？

EDIT: I should have specified: I want to be able to have different sized text flowing around the floats, and so cannot be fixed to any specific character/line height. 编辑：我应该指定：我希望能够使不同大小的文本在花车周围流动，因此不能固定为任何特定的字符/行高。

Answer 1

If you set the line height and font, it seems to work better: http://jsfiddle.net/cWXge/ 如果您设置行高和字体，它似乎可以更好地工作： http : //jsfiddle.net/cWXge/

This looks identical in Firefox and Chrome in Ubuntu. 在Firefox和Chrome（在Ubuntu中）中，这看起来相同。

Webkit文本重叠的浮动元素

问题描述

1 个解决方案

解决方案1
0 2011-10-04 07:36:58

Webkit文本重叠的浮动元素

问题描述

1 个解决方案

解决方案1 0 2011-10-04 07:36:58

解决方案1
0 2011-10-04 07:36:58