0

IE10 にはdiv、並べて取得する必要がある 2 つのタグがあります。Mac Chrome、Safari、Firefox では、すべてが意図したとおりに機能します。たとえば、Windows 上の Internet Explorer 10 では、divs意図したとおりにフローティングしません。

また、違いがある場合は、さまざまなデバイス レイアウトにいくつかの Twitter ブートストラップ クラスを使用しています。

<div class="hidden-xs" style="width: 1000px;">
    <div style="width: 470px; float: left;">a</div>
    <div style="width: 530px; float: right;">b</div> 
    <div style="clear: both;"></div>
</div>

Internet Explorer 10では、次のように表示されます。

壊れたIEで

Chromeでは(意図したとおり) 次のようになります。

意図したとおりのクロム

Internet Explorer 10でbox-sizingプロパティのチェックを外すと、float動作し始めますが、サイトの他の要素が台無しになります。 ボックスサイズ変更なしの IE

私の質問:

1. 他のブラウザー (Mac) では動作しているように見えるのに、なぜ IE はこれを行うのでしょうか。

2.簡単に修正するには？の を変更してwidthsにdivs置き換えfloat leftてみましたright。clear: both divまた、違いを確認するために削除しました。

3. ボックスサイズを削除すると、問題はどのように解決しますか?

4

2 に答える 2

2

これを試してみてください

    <div class="hidden-xs" style="width: 1000px; float:left;">
      <div style="width: 470px; float: left;">a</div>
      <div style="width: 530px; float: left;">b</div> 
      <div style="clear: both;"></div>
   </div>
于 2013-10-21T10:52:28.377 に答える
0

530px div の場合、float: left を right の代わりに追加し、position: を 530 と 470 div の両方に対して相対的に追加します。

于 2013-10-17T23:32:01.163 に答える