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