Question

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

    <!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元素周围正确流动。您可以看到一些文本被绘制在间隔物的红色背景的顶部。看起来每行文本的位置只是针对每个字符的顶部像素计算，而不是字符的整个高度。

好像是个bug。我对吗？也许有人可以建议我做错了什么，更重要的是，有没有解决办法？

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

Answer 1

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

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

Webkit文本重叠浮动元素

1 个答案: