序文...
Bootstrap 3 を使用し、レスポンシブ レイアウトを使用するようにサイトを更新することを検討しています。このウェブサイトで使用されているブラウザの第 1 位は (驚くべきことに) サファリ モバイルであることに気付きました。IE8 は 5 位です (Firefox のすぐ上)。したがって、IE6 + IE7 の合計使用率は 0.9% ですが、それらをサポートする予定はありませんが、IE8 はこの問題を解決するのに十分重要です。
問題....
画面ブラウザの幅に基づいてレイアウトが変化する 3 つの div があります。セットアップは次のとおりです。
html:
<div class="col-sm-7">#1</div>
<div class="col-sm-5 floatright">#3</div>
<div class="col-sm-7">#2</div>
CSS:
.floatright{float:right; clear: none;}
@media (max-width: 768px)
{
.floatright{float:none;}
}
ポイントは、2 番目の div (#3) が右側にあることです。
ここでこのレイアウトに取り組む質問があります Bootstrap を使用してこのモバイル/デスクトップ レイアウトを実現することは可能ですか? (または他のグリッド)
私が抱えている問題は、IE8 div #2 auto-clearfixes にあります。つまり、コンテンツは div #1 の下ではなく、かなり下の div #3 の下にあります。
警告...
IE10 を使用しています -> IE8 互換モード