IE7得到我的表中的內容重疊

我有一個大表格來顯示和輸入數據。每個單元格包含一個輸入字段，一個選擇字段和一個帶背景圖像的跨度。當用戶調整窗口大小時，我希望所有三個都保持在同一行。我在IE8，FF和Chrome中正常工作，但IE7對我的設計不滿意。它保持在同一行的所有三個，但不是防止表過於小，一切都重疊這可能是它能做的最糟糕的事情。IE7得到我的表中的內容重疊

這裏的表的樣本：

<table> 
     <tr> 
      <td>Check Stock</td> 
      <td class="param-value-TransferTime" style="white-space: nowrap;"> 
       <div style="position: relative; margin-right: 16px;"> 
        <span style="float: left;">      
         <input type="text" size="3" maxlength="3" name="duration" autocomplete="off"> 
         <select name="unit"><option value="Y">Years</option><option value="M">Months</option><option value="W">Weeks</option><option value="D">Days</option></select>     
        </span> 
        <span style="position: absolute; right: -16px;height:16px;width:16px;background-color:blue"></span> 
       </div> 
      </td> 
      <td class="param-value-QueueTime" style="white-space: nowrap;"> 
       <div style="position: relative; margin-right: 16px;"> 
        <span style="float: left;">     
         <input type="text" size="3" maxlength="3" name="duration" autocomplete="off"> 
         <select name="unit"><option value="Y">Years</option><option value="M">Months</option><option value="W">Weeks</option><option value="D">Days</option></select>     
        </span> 
        <span style="position: absolute; right: -16px;height:16px;width:16px;background-color:blue"></span> 
       </div> 
      </td> 
      <td class="param-value-WaitTime" style="white-space: nowrap;"> 
       <div style="position: relative; margin-right: 16px;"> 
        <span style="float: left;"> 
         <input type="text" size="3" maxlength="3" name="duration" autocomplete="off"> 
         <select name="unit"><option value="Y">Years</option><option value="M">Months</option><option value="W">Weeks</option><option value="D">Days</option></select> 
        </span>      
        <span style="position: absolute; right: -16px;height:16px;width:16px;background-color:blue"></span> 
       </div> 
      </td>   
     </tr>   
</table>

我已經與具有相同的造型適用於它的藍色方塊代替我的形象。

這裏的所有瀏覽器，但IE7做了正確的行爲：

Proper behaviour - browser adds a scroll-bar and doesn't squeeze table content

下面是IE7的作用：

IE7 makes the form unusable

根據我的研究，我雖然最簡單的方法來解決我的問題是爲我的TD增加一個寬度。我不喜歡，因爲每個單元格中的實際輸入會根據用戶的選擇而有所不同，所以我希望瀏覽器能夠找到最小尺寸。無論如何，我確實嘗試過，但沒有解決問題。我試過寬度和最小寬度，但內容仍然重疊。

有什麼想法？

來源

2011-08-02 Melanie

三件事：

的代碼會更容易解決和處理，如果你分離結構（HTML）的風格（CSS）。不是一個可怕的批評，只是一個觀察。
您可以刪除td中的positioning和floats，並給出元素display:inline-block。可能工作。
如果失敗，請使用條件註釋來定位IE7（例如，<!--[if IE 7]>）並將寬度應用於td。

來源

2011-08-02 18:18:42

1）我同意，但在這種情況下，大多數的造型是通過量的jQuery UI的做，我只是調整的方式（和一些造型，我已經把代碼中的一些事情其實是在樣式表，只是想一些簡單的！）2）做到了！代碼現在更簡單，適用於所有瀏覽器！謝謝你的提示！ – Melanie

很酷。很高興它解決了@Melanie。 –

下面是它看起來我的TD內現在： '的（輸入如前）的' – Melanie

我的建議是刪除代碼中的任何位置，你寫TDS所以你不需要定位。

來源

2011-08-02 18:09:18

謝謝你，你是對的，我並不需要所有的定位！傑森的回答比較完整，所以我接受了他的建議，但是謝謝你的提示！ – Melanie

你很受歡迎！ –

IE7得到我的表中的內容重疊

回答

相關問題