1

Bootstrap 3 の 3 列レイアウトで列を不適切にラップする IE7 に苦労しています。

私のグリッドシステムは、IE8 を含む他のすべてのブラウザーで、私が望むように動作します (小さいデバイスを反映する解像度の場合はスタックします)。IE8 から IE7 に失われているサポートが原因で、新しい行の列の 9+ 位置にコンテンツの一部を含む列が表示される IE7 で正しくラップされない原因を突き止めたいと思います.

< col-md-3 >< col-md-3 >< col-md-3 >

次のように表示されます。

< col-md-3 >< col-md-3 ><br />
< col-md-3 >

解決

Boostrap 3 は、一貫した構造を実現するために < style = "width:100%;"> を使用しながら、各列要素で padding-left/padding-right を使用します。

IE7 はこのパディング スペースを適切にレンダリングせず、代わりに他のブラウザーがスペースをマージンするようにレンダリングします。つまり、親コンテナーの幅が 960px の場合、子コンテナーの幅と追加されたマージンの合計は 960 未満でなければなりません。本質的に (960/3)!=((320+マージン)*3)。

この問題を克服するために、各列を固定幅のコンテナーにラップしました。

4

2 に答える 2

0

Aibrean の言及のように、最善の解決策は、IE7 用に別のスタイルシートを作成することです。条件付きコメントを使用してみてください:

http://www.quirksmode.org/css/condcom.html

<!--[if IE 7]>
 <link rel='stylesheet' type='text/css' href='/path/to/ie7styles.css' />
<![endif]-->
于 2014-06-20T09:53:33.943 に答える