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;
}

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

原文地址：https://www.jb51.cc/html/231010.html