0

問題は、すべての div を強制的に 1 行にする必要があることです。テーブルセルの動作をさせる。 そしてIE7をサポートします。

フィドルへのリンクhttp://jsfiddle.net/Beck/BH5WG/ および以下のコードの ofc コピー:

HTML:

<div class="wr">
    <div class="con">
        <div class="item">some text1</div>
        <div class="item">some text1 some text1</div>
        <div class="item">some text1</div>
        <div class="item">some text1 some text1</div>
    </div>
</div>

<div class="wr" id="wr2">
    <div class="con">
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <div class="item">some text1</div>
                </td>
                <td>
                    <div class="item">some text1 some text1</div>
                </td>
                <td>
                    <div class="item">some text1</div>
                </td>
                <td>
                   <div class="item">some text1 some text1</div>
                </td>
            </tr>
        </table>
    </div>
</div>

CSS:

.wr {
    width:300px;
    border:1px solid red;
}
.con {
    height:24px;
}
.item {
    float:left;
    white-space:nowrap;
}

#wr2 {
    margin:50px 0px 0px 0px;
}


​
4

2 に答える 2

4

display: tableIE6 / 7のエミュレーションを使用して、IE6/7で正確にタブで表示することができます。CSSは次のようになります。

/* Bind htc behavior to element that should behave like table. */
.con {behavior: url(/js/display-table.min.htc); }

またはこれ：

/* Bind htc to BODY and then trigger tably behavior via -dt-display property. */
BODY {behavior: url(/js/display-table.min.htc); }
.con {-dt-display: table; }
.item {-dt-display: table-cell; }
于 2012-11-19T00:44:31.920 に答える
2

手元に IE7 テスト環境がありませんが、display:inline-block;代わりに試してみましたfloat:leftか?

IE7はデフォルトではそれを理解していませんが、理解していますdisplay:inline; zoom:1;

これにより、従う意欲が高まる可能性がありますwhite-space:nowrap;

たとえば、あなたのフィドルから：

.wr {
    border:1px solid red;
    white-space:nowrap;
}

.con {
    height:24px;
}

.item {
    display:inline-block;
    *display:inline;
    *zoom:1;
}

#wr2 {
    margin:50px 0px 0px 0px;
}
于 2012-11-19T00:35:32.163 に答える