gpt4 book ai didi

html - Webkit 文本重叠 float 元素

转载 作者:行者123 更新时间:2023-11-28 03:44:31 25 4
gpt4 key购买 nike

我试图让文本以不规则的形状流动,并以我认为应该起作用的方式使用空 float :

    <!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。我对吗?也许有人可以建议我做错了什么,更重要的是,有什么解决方法吗?

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

最佳答案

如果设置行高和字体,效果会更好:http://jsfiddle.net/cWXge/

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

关于html - Webkit 文本重叠 float 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7644143/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com