IE7使我的表中的内容重叠

Question

我有一个大表来显示和输入数据。每个单元格包含一个输入字段，一个选择和带有背景图像的跨度。当用户调整窗口大小时，我希望所有三个都保持在同一行。我让它在IE8，FF和Chrome中正常工作，但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所有浏览器所做的正确行为：

以下是IE7的作用：

根据我的研究，我解决问题的最简单方法是为我的TD增加一个宽度。我不愿意，因为每个单元格中的实际输入会根据用户的选择而有所不同，所以我希望浏览器找到最小尺寸。无论如何我确实尝试过，但它没有解决问题。我尝试了宽度和最小宽度，但内容仍然重叠。

有什么想法吗？

Answer 1

三件事：

1. 如果将结构（HTML）与样式（CSS）分开，代码将更容易修复和操作。不是一种可怕的批评，只是一种观察。

2. 您可以移除positioning中的floats和td，并提供元素display:inline-block。可能会工作。

3. 如果失败，请使用条件注释来定位IE7（例如，<!--[if IE 7]>）并将宽度应用于那里的td。

Answer 2

我的建议是在编写tds时删除代码中的任何位置，这样就不需要定位了。