1

ネストされた DIV で内側の DIV の幅 (コンテンツに縮小する方法) を知らずに、既知の方法を使用して DIV を別の DIV の内側に水平に配置しようとしています。

HTMLは次のとおりです。

<div class="my-container">
    <div class="my-wrapper">
        <div class="item">
            <span>My Item</span>
        </div>
    </div>
</div>

CSSは次のとおりです。

div.my-container {
    width: 300px;
    height: 100px;
    padding: 100px 0 0 0;
    border: 1px solid #000;
}

div.my-wrapper {
    background-color: blue;
    text-align: center;
}

div.item {
    display: inline-block;
    padding: 0 20px;
    background-color: pink;
}

div.item span {
    display: inline-block;
    height: 50px;
    background-color: red;
}

jsFiddle のテスト ケース: http://jsfiddle.net/ThZxx/2/

すべてのブラウザで完全に問題ないように見えます。

Internet Explorer 7 を除く:

ピンクの DIV (div.item)がコンテンツに縮小されておらず、親コンテナー内の使用可能なすべてのスペースを占有しているように見えます。

どうすればこれを修正できますか?

4

3 に答える 3

2

IE7 はサポートしていないため、これは IE7 の問題display: inline-blockです。IE の条件付きスタイルを追加して、に変更する必要がありdisplay: inlineます。

<!--[if IE 7]>
div.item { display: inline; }
<![endif]-->
于 2012-08-24T16:41:14.793 に答える
1

div.item を次のように変更します。

div.item {
    display: inline-block;
    padding: 0 20px;
    background-color: pink;
    *display: inline;
    zoom: 1;
}

追加の表示スタイルの前に * を追加すると、他のブラウザーがそのスタイルを使用できなくなります。IE だけがそれを解析して適用します。

于 2012-08-24T16:40:55.523 に答える
1

IE7 は inline-block を正しく認識しませんが、zoom:1; を追加して修正する簡単なハックがあります。および *display: inline; あなたのCSSに、次のように：

div.item {
    display: inline-block;
    padding: 0 20px;
    background-color: pink;
    zoom:1;
    *display: inline;
}

この問題の詳細と修正については、http: //flipc.blogspot.ca/2009/02/damn-ie7-and-inline-block.htmlをご覧ください。

于 2012-08-24T16:42:04.837 に答える