html - 浏览器之间奇怪的文本换行差异

标签 html css word-wrap

试图调试一个更大的问题,我设法将其简化为这种简单的情况:

在 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/

相关文章:

javascript - 在不破坏 CSS/JS 的情况下将旧的静态页面添加到 Rails 应用程序中

javascript - 在进入视口(viewport)时启动 SVG 动画

html - 何时使用目标 ="_self"

html - CSS IE6 案例 - 内部 div 不适合 100%

vim - 使 gvim 将包裹的行视为新行

python - 是否有与 Linux/Unix "fold"命令等效的 Vim?

html - 在顶栏全高制作链接

html - 开关 css 不适用于输入类型的 radio

html - 当 Div 达到父 div 的宽度时换行

PHP 消息正文看起来散乱