0

より大きな問題をデバッグしようとして、私はそれをこの単純な状況に減らすことができました:

ここでは 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 では、2 番目のボックスのテキストが折り返されます。"testc" の後に改行します。ただし、Opera、IE9、IE8 では折り返しがありません。

2 つのボックスの唯一の違いは、2 つ目のボックスの br タグです。

2 番目のボックスで行が折り返される理由がわかりませんが、最初のボックスでははるかに大きな行が折り返されません。そして、br タグはそれと何の関係があるのでしょうか? ブラウザに同じ方法で表示させるために何ができるか知っている人はいますか?

また、どのブラウザが正しく表示されますか?

PS

フロートは不可欠です (私が言ったように、これはより大きな問題の単純化です)。

これを Windows 7 でテストしていることを付け加えておきます。

編集：Safariでもラップします

4

2 に答える 2

1

imgfloat要素の後に DB からプルされたコンテンツを でラップするとinline-block div(またはspanを使用できない場合div)、問題は解決されます。DB からプルされたコンテンツに<br>or ... タグがある場合でも。<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;
}
于 2013-03-27T16:49:53.213 に答える
0

空白属性を pre-wrap などに定義すると、すべてのブラウザーで同じラッピングが行われ、<br />タグをドロップできます...

.box { white-space: pre-wrap; }
于 2013-03-27T16:06:57.373 に答える