Webkit 文本重叠浮动元素

发布于 2024-12-07 15:32:08 字数 1935 浏览 0 评论 0原文

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

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

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

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

原文

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)

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

分享到QQ

分享到微博