CSS：显示：表格单元格IE7 +或强制浮动div在一行

Question

问题是，我需要强制所有的div在一行。具有表格单元格行为。 并支持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; 
} 


​ 

Answer 1

我没有我的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; 
} 

Answer 2

您可以使用display: table emulation for IE6/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; }