Текст Webkit, перекрывающий плавающие элементы - PullRequest
Новая
       13

Текст Webkit, перекрывающий плавающие элементы

2 голосов
/ 04 октября 2011

Я пытаюсь заставить текст отображаться в неправильной форме, и я использовал пустые плавающие выражения так, как я думаю, должно работать: 

    <!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. Вы можете видеть, что какой-то текст нарисован поверх красного фона распорок. Похоже, что позиция каждой строки текста рассчитывается только для верхнего пикселя каждого символа, а не для всей высоты символов.

Кажется, это ошибка. Я прав? Может быть, кто-то может подсказать, что я делаю не так, и что более важно, есть ли обходной путь?

РЕДАКТИРОВАТЬ: Я должен был указать: я хочу иметь возможность текста разного размера, обтекающих поплавки, и поэтому не может быть установлен для какого-либо конкретного символа / высоты строки.

1 Ответ

0 голосов
/ 04 октября 2011

Если вы установите высоту строки и шрифт, она будет работать лучше: http://jsfiddle.net/cWXge/

Это похоже на Firefox и Chrome в Ubuntu.

...