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

wrong text wrap

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

截图：

Chromium 22.0.1223.0 (149385) and Chrome 21.0.1180.79 Firefox 14.0.1 Opera 12.00

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

Answer 2

这对我来说当然是个错误。如果您正在寻找一种解决方法，您应该能够使用跨度包装图像，并浮动包装跨度而不是图像。

像这样：

<h2>Float Left</h2>
<div>
  <p>
    <span class="icon"><img src="http://static.jsbin.com/images/favicon.png"></span>
    no sea takimata <span class="hightlight">sanctus estestest</span> Lorem ipsum dolor sit amet.
  </p>
</div>

使用这些css规则代替原来的img规则：

.icon {
  float: left;
}
.icon > img {
  margin-left: -30px;
  background: pink;
  padding: 5px 0;
}

以下是修改后的示例： http://jsbin.com/onoced/12/edit

Answer 3

请尝试以下代码：我在ie，mozilla，chrome，opera和safari上进行了测试。

在苹果野生动物园测试

http://jsfiddle.net/CrxQA/6/

在所有浏览器中，它处理相同并包装

Answer 4

这是我的解决方案：

<style>
#main{
  width: 200px;
  height:200px;
}
#pic
{
    width:100px;/* or any size you like*/
    height:auto;
    float:left;
}
#txt
{
    width:100px;
    height:auto;
    float:left;
    overflow:hidden;
}
p 
{
 margin-right: 32px;
 padding-left: 30px;
}
</style>

HTML：

<div id="main">
    <div id="pic">
        <img src="http://static.jsbin.com/images/favicon.png"/>
    </div>
    <div id="txt">
          <p>
            no sea takimata sanctus estestest Lorem ...
          </p>
    </div>
</div>

Answer 5

我不确定这是一个错误，但它似乎仅限于WebKit（在Safari中测试）。我过去遇到了问题，负边距会影响父元素。

根据我的经验，负边距可能无法预测，如此处所示，在不同的浏览器中通常会有不同的显示方式。你有什么理由不能使用这种类型的布局...

http://jsbin.com/onoced/7/edit

Answer 6

看起来你发现了一个错误。

这类似于另一个关于负边距和文字换行的活动错误：问题141887。可能他们都是相关的。

Answer 7

是的，它看起来像一个bug。您可以考虑的另一个选项是在图片上设置display到block并添加1行的负底边距。

img {
  display: block;
  margin-left: -30px;
  margin-bottom: -1em;
}

http://jsbin.com/onoced/10/edit

Answer 8

我不知道你的目标是什么，但是让我说我不喜欢以这种方式抛出文本而我总是喜欢把它放在标签中。所以对我来说，最好的解决方案（绕过“bug”！？）是：

<div>
    <img>
    <p>text here </p>
</div>

或

<section>
    <div class="try">    
        <img>
        <p>text here </p>
    </div>
    <div class="try">    
        <img>
        <p>text here </p>
    </div>
    <div class="try">    
        <img>
        <p>text here </p>
    </div>
    .
    .
    .
</section>

无论如何，您可以使用自动换行属性来调整Ptag的列表。

Answer 9

解决此问题的一种简单方法是只在段落前推送图像，然后删除负边距：

DOM：

<div>
  <img src="http://static.jsbin.com/images/favicon.png">
  <p>
    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; */
}

以下是modified JS Bin:

Answer 10

我不知道你的目标是什么，但是让我说我不喜欢以这种方式抛出文本而我总是喜欢把它放在标签中。所以对我来说，最好的解决方案（绕过“bug”！？）是：

<div>
 <img>     <p>text here </p> </div>

或
<section> <div class="try"> <img> <p>text here </p> </div> <div class="try"> <img> <p>text here </p> </div> <div class="try"> <img> <p>text here </p> </div> . . .

无论如何，您可以使用自动换行属性来调整Ptag的列表。

Answer 11

正如Jasper de Vries所说，我会设置img来显示：block。内联元素的边距具有不可预测的结果。我还要设置p标签：block。

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>JS Bin</title>
<style type="text/css">
  div {
    border: 1px solid red;
    margin: 20px 0;
    width: 200px;
  }

  p {
    background: #EEE;
    border-right: 1px solid green;
    margin: 0;
    margin-right: 20px;
    padding-left: 30px;
    display:block
  }

  img {
    background: pink;
    float: left;
    display:block;
    margin-left: -30px;
    padding: 5px 0;
  }

  .nf {
    float: none;
  }

  .abs {
    position: absolute;
  }

  .hightlight {
    background: rgba(255,255,0,0.2);
  }
</style>
</head>
<body>
  <h2>No Float</h2>
   <div>
    <p>
      <img class="nf" src="http://static.jsbin.com/images/favicon.png" alt="This make it W3C compliant">
      no sea takimata <span class="hightlight">sanctus estestest</span> Lorem ipsum dolor sit amet.
    </p>
  </div>
  <h2>Float Left</h2>
   <div>
    <p>
      <img src="http://static.jsbin.com/images/favicon.png" alt="This make it W3C compliant">
      no sea takimata <span class="hightlight">sanctus estestest</span> Lorem ipsum dolor sit amet.
    </p>
  </div>

  <h2>Position Absolute</h2> 
  <div>
    <p>
      <img class="abs fn" src="http://static.jsbin.com/images/favicon.png" alt="This make it W3C compliant">
      no sea takimata <span class="hightlight">sanctus estestest</span> Lorem ipsum dolor sit amet.
    </p>
  </div>
</body>
</html>

此代码已通过W3C最新标准验证。将代码复制并传递给验证器进行确认。

W3C Validator By Input

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

11 个答案: