css - CSS：display:table-cell IE7+ 或强制浮动 div 在一行中

Question

问题是，我需要强制所有 div 排成一行。具有表格单元格行为。 并且支持IE7。

链接到小提琴http://jsfiddle.net/Beck/BH5WG/ 和下面的代码副本：

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;
}


​

Answer 1

您可以使用IE6/7 的display: table仿真来在 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; }

Answer 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;
}