Question

尝试调试更大的问题我设法将其减少到这种简单的情况：

这是HTML：

<div class="box">
    <img class="pic" src="http://i3.minus.com/jbuwgurDfNniFM.png"/>
    Test 1
    this is a test: testa testb testc testd teste
</div>

<div class="divider"/></div>

<div class="box">
    <img class="pic" src="http://i3.minus.com/jbuwgurDfNniFM.png"/>
    Test 2<br/>
    this is a test testa testb testc testd teste
</div>

CSS：

.box {
    background-color: beige;
    float: left;
    margin-right: 10px;
    height: 100px;
}

.pic {
    float: left;
}

.divider {
    clear:both;
    height:10px;
    width:500px;
    background:blue;
}

在Firefox，Chrome和Safari中，第二个框中的文字被包装。在“testc”之后开始一个新行但是在Opera，IE9，IE8中没有包装。

两个方框之间的唯一区别是第二个方框中的br标签。

我不明白为什么在第二个框中行被包裹但在第一个框中没有包裹更大的行。 br标签与它有什么关系？有谁知道我可以做些什么来强制浏览器以同样的方式显示它？

此外，哪些浏览器能够正确使用它？

P.S。

花车是必不可少的（就像我说的，这是一个更大问题的简化）。

我应该补充说我正在Windows 7上测试它

编辑：它也包含在Safari中

Answer 1

如果您在img inline-block中的浮动div元素之后包装从数据库中提取的内容（或span，如果您无法使用{{ 1}}）问题将得到解决。即使您在数据库中提取的内容中包含div或<br> ...标记。

因此，您的示例代码将如下所示：

<h1>

/ \

<div class="box">
 <img class="pic" src="http://i3.minus.com/jbuwgurDfNniFM.png"/>
 <div class="DBContentWrapper">
  Test 1
  this is a test: testa testb testc testd teste
 </div>
</div>

<div class="divider"/></div>

<div class="box">
 <img class="pic" src="http://i3.minus.com/jbuwgurDfNniFM.png"/>
 <div class="DBContentWrapper">
   Test 2<br/>
   this is a test testa testb testc testd teste
 </div>
</div>

Answer 2

如果您将white-space属性定义为例如预包装，您将在所有浏览器中使用相同的包装，您可以删除<br />标签...

.box { white-space: pre-wrap; }

奇怪的文本包装浏览器之间的差异

2 个答案: