15

这个看起来像 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

截图：

铬 22.0.1223.0 (149385) 和铬 21.0.1180.79 火狐 14.0.1 歌剧 12.00

4

11 回答 11

8

正如您所指出的，我不会说这是一个错误：它在 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

于 2012-08-29T08:56:18.023 回答
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

于 2012-08-23T22:14:23.053 回答
1

请试试这个代码：我在 ie、mozilla、crome、opera 和 safari 上测试过。

在 Apple Safari 中也经过测试

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

在所有浏览器中，它的处理方式相同并被包裹

于 2012-08-29T14:29:54.733 回答
1

这是我的解决方案：

<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>
于 2012-08-30T12:01:24.847 回答
0

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

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

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

于 2012-08-23T15:39:09.633 回答
0

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

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

于 2012-08-23T15:52:42.030 回答
0

是的，它看起来像一个错误。您可能会考虑的另一个选项是在图像上设置displaytoblock并添加 1 行的负下边距。

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

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

于 2012-08-23T21:41:22.927 回答
0

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

<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 列表。

于 2012-08-27T07:34:22.817 回答
0

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

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

这是修改后的 JS Bin：

于 2012-08-29T18:39:53.997 回答
0

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

<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 列表。

于 2012-08-30T08:11:40.600 回答
0

正如 Jasper de Vries 所提到的，我会将 img 设置为 display:block。由于内联元素的边距具有不可预测的结果。我还将 p 标签设置为 display: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 验证器（按输入）

于 2012-08-30T15:12:29.747 回答