html – 带负边距的浮动元素会导致文本包装错误？

概述这个看起来像webkit中的文本包装bug,还是我想念的东西？ DOM： <div> <p> <img src="http://static.jsbin.com/images/favicon.png"> no sea takimata sanctus estestest Lorem ... </p></div> CSS： div { width: 200px;} 这个看起来像webkit中的文本包装BUG,还是我想念的东西？

DOM：

<div>  <p>    <img src="http://static.Jsbin.com/images/favicon.png">    no sea takimata sanctus estestest Lorem ...  </p></div>

CSS：

div {  wIDth: 200px;}p { margin-right: 32px; padding-left: 30px;}img { float: left; margin-left: -30px;}

演示：http://jsbin.com/onoced/1/edit

截图：

解决方法 我不会说这是一个BUG,正如你所指出的那样：它在WebKit浏览器中的表现相同.否则,我们必须将浏览器引擎之间的每个区别分类为错误.

虽然有人向Webkit.org：http://bugs.webkit.org/show_bug.cgi?id=63074报告了类似的问题

但是这不仅限于段落,同样的行为也可以在列表和标题中找到.

参见示例：http://jsbin.com/uzozus/1/edit

Webkit浏览器中对此行为的解释是：

If a negative margin is applIEd opposite a float,it creates a voID
leading to the overlapPing of content.

资料来源：http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

让我们将其应用于您的示例：您的图像宽度为16像素乘16像素,所以为了平衡这个30像素的负边距我们必须水平添加14px

img {    float: left;    margin-left: -30px;    padding:5px 14px 0 0;  }

参见示例：http://jsbin.com/onoced/37/edit

总结

以上是内存溢出为你收集整理的html – 带负边距的浮动元素会导致文本包装错误？全部内容，希望文章能够帮你解决html – 带负边距的浮动元素会导致文本包装错误？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。