试图调试一个更大的问题,我设法将其简化为这种简单的情况:
在 jsFiddle 中:http://jsfiddle.net/uUGp6/
这是 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 标签与它有什么关系?有谁知道我可以做些什么来强制浏览器以相同的方式显示它?
此外,哪些浏览器可以正常使用?
附言
float 是必不可少的(就像我说的,这是一个更大问题的简化)。
我应该补充一点,我正在 Windows 7 上对此进行测试
编辑:它也在 Safari 中包装
最佳答案
如果在 float img
之后包装从数据库中提取的内容inline-block
中的元素div
(或 span
如果你不能使用 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>
/\
.box {
background-color: beige;
float: left;
margin-right: 10px;
height: 100px;
}
.DBContentWrapper {
display: inline-block;
}
.pic {
float: left;
}
.divider {
clear:both;
height:10px;
width:500px;
background:blue;
}
关于html - 浏览器之间奇怪的文本换行差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15663460/