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

时间:2012-08-21 13:34:16

标签: html css webkit css-float textwrapping

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

11 个答案:

答案 0 :(得分: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

答案 1 :(得分: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

答案 2 :(得分:1)

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

在苹果野生动物园测试

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

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

答案 3 :(得分: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>

答案 4 :(得分:0)

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

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

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

答案 5 :(得分:0)

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

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

答案 6 :(得分:0)

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

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

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

答案 7 :(得分:0)

我不知道你的目标是什么,但是让我说我​​不喜欢以这种方式抛出文本而我总是喜欢把它放在标签中。所以对我来说,最好的解决方案(绕过“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的列表。

答案 8 :(得分: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; */
}

以下是modified JS Bin:

答案 9 :(得分:0)

我不知道你的目标是什么,但是让我说我​​不喜欢以这种方式抛出文本而我总是喜欢把它放在标签中。所以对我来说,最好的解决方案(绕过“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的列表。

答案 10 :(得分:0)

正如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