4

div A をフロートし、div B をオーバーフロー: 横に隠した場合、div B はフロートされた div の横にある利用可能なすべてのスペースを取る必要があります。また、div B に最小幅が設定されていて、ウィンドウ サイズが小さすぎてこの 2 つの div を同じ行に保持できない場合、div B は div A の下に折り返され、親の使用可能なすべての幅を取る必要があります。この正確な動作は、IE8 を除くすべての主要なブラウザーで見られ、IE7 でも期待どおりに処理されます。IE8 では、ウィンドウ サイズが十分に小さいため、div B が div A の下にラップされます。div B は、使用可能なすべての幅を使用せず、最小幅のみを持ちます。問題は、それはバグなのか、それとも標準的な動作なのかということです。これがバグである場合、どうすれば回避できますか?

ここにテスト ケースがあります: http://jsfiddle.net/BJM4s/2/、ウィンドウのサイズを変更して実際の動作を確認します。

HTML:

<div class="parent">
    <div class="A">
        <img src="http://placekitten.com/g/100/100  " />                                                     
    </div>
    <div class="B">
       float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float
     </div>
 </div>​

CSS:

.parent {
    overflow:hidden;
    margin: 20px;
    border: 1px solid;
}


.A {
    float:left;
    margin-right: 10px;
}
.B {
    overflow:hidden;
    min-width: 200px;
    background: lime;
}​
4

1 に答える 1

1

に追加display: table-cellする.B と、動作するようです。他のすべてのブラウザーで問題が発生するかどうかを完全にテストしたわけではありません。IE8 用に設定するのが最善かもしれません (ただし、IE7/9 や Firefox には影響しないようです)。

于 2012-12-05T23:36:52.433 に答える