1

HTML：

<div class="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS：

.wrapper{
    width:1000px;
    text-align:center;
    float:left;    
}

.wrapper .box{
    width:300px;
    height:50px;
    display:inline-block;
    background:#F00;
    margin:0 10px 10px 0;
    overflow:hidden;
 }

このように、すべてのdivをラッパーdivの中央に配置します。ここに画像の説明を入力してください

上記のコードは、IE8、IE9、Chrome、Safari、Opera、FFでは正常に機能しますが、IE7では機能しません。IE7でページを開くと、ページは次のようになります。

ここに画像の説明を入力してください

float：leftを使用すると、問題は解決したように見えますが、すべてのdivは左側に基づいています。どうすればこれを解決できますか？

http://jsfiddle.net/eBxFX/2/

4

1 に答える 1

4

インライン ブロックは IE7 では機能しません。

zoom:1 と display:inline をハックとして使用するか、ie7 の場合のみ別の CSS からハックせずに使用する必要があります。 

.wrapper .box{
    width:300px;
    height:50px;
    display:inline-block;
    *display: inline;
    *zoom:1;
    background:#F00;
    margin:0 10px 10px 0;
    overflow:hidden;
}

http://jsfiddle.net/eBxFX/4/

于 2013-01-22T15:28:52.353 に答える