0

小さなコードが 1 つありますが、クロム (見栄えが良い) と IE では動作が大きく異なります。クロムでは、スクロールはすべてのdivを表示するのに十分です。IE では、スクロールのサイズは css container-inner です。

少しばかげていますが、この場合はIE10の方がうまく機能しますが、Chromeスタイルが好きです。

http://jsfiddle.net/VpZ8C/

誰かが私がそれを修正する方法を知っていますか?

<div class='container-outer' style="-ms-overflow-style:auto;">
    <div class='container-inner'>
        <div class="box">1</div><div class="box">2</div>
        <div class="box">3</div>
        <div class="box">3</div>
    </div>
</div> 
<style> 
.container-outer  { 
    overflow-x: auto;  
    width: 855px; 
    height: 250px; 
    -ms-overflow-style: auto; 
     border: 1px solid black; } 
.box {
   width: 250px !important;
   border: 1px solid #ddd;
   height: 150px;
   float: left; 
} 
.container-inner { width: 2500px; } 
</style>
4

1 に答える 1

0

固定境界線の代わりにパーセンテージを使用してコンテナーの相対的な配置を使用するか、ボックスのサイズ変更 ( http://css-tricks.com/box-sizing/ )を使用しないのはなぜですか
例 1:

    #container {
    position: relative;
    width: 80%;
    } 

    #header {
    position: relative;
    height: 50px;
    padding: 10px;
    }

例 2:(ボックス サイジングを使用)

    #container { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    /* Since this element now uses border-box sizing, the 10px of horizontal
    padding will be drawn inside the 80% width */
    width: 80%;
    padding: 0 10px;
    }
于 2013-11-04T06:57:09.480 に答える