Html Webkit文本重叠浮动元素_Html_Css_Webkit_Css Float

Html Webkit文本重叠浮动元素

html css

Html Webkit文本重叠浮动元素,html,css,webkit,css-float,Html,Css,Webkit,Css Float,我试图让文本以不规则的形状流动，并以我认为应该有效的方式使用空浮动： <!DOCTYPE HTML> <html> <head> <style type='text/css'> .leftspacer { height:10px; background-color:red; float:left; clear:left;} #co

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

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

主持

它在Firefox甚至IE9中都可以正常工作，但在webkit浏览器Safari Win 5.1和Chrome 14.0.835.187中，我发现文本在div.leftspacer元素周围的流动不正确。您可以看到一些文本绘制在间隔符红色背景的顶部。看起来每行文本的位置只是针对每个字符的顶部像素计算的，而不是字符的整个高度

好像是个虫子。我说得对吗？也许有人会建议我做错了什么，更重要的是，有没有解决办法

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

如果设置行高和字体，效果似乎更好：

这在Firefox和Ubuntu中的Chrome中看起来是一样的。

如果您设置行高和字体，它似乎工作得更好：

这在Firefox和Ubuntu的Chrome中看起来是一样的。

True，将行高度设置为与间隔符相同的高度即可。但是，我将我的示例简化了一点，因为我希望能够以不同的行高（例如嵌入的标记）流动文本，而不需要所有文本行高都是10px的倍数；例如，请参见True，将线高度设置为与垫片相同的高度将起作用。但是，我将我的示例简化了一点，因为我希望能够以不同的行高（例如嵌入的标记）流动文本，而不需要所有文本行高都是10px的倍数；例如，见