带有负边距的浮动元素导致文本换行错误？

Question

这个看起来像webkit中的文本换行错误,还是我错过了什么？

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

截图:

Answer 1

我不会说这是一个错误,正如你所指出的:它在WebKit浏览器中的行为相同.否则,我们必须将浏览器引擎之间的每个差异归类为错误.

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

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

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

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

如果在浮点数对面应用负边距,则会产生导致内容重叠的空白.

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

让我们将其应用于您的示例:您的图像宽度为16像素x 16像素,因此为了将此值与30像素的负余量相等,我们必须水平添加14像素

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

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