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

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

Answer 2

三件事：

1. 如果您将结构 (HTML) 与样式 (CSS) 分开，代码将更容易修复和操作。不是一个糟糕的批评，只是一个观察。

2. 您可以删除 tds 中的 positioning 和 floats 并提供元素 display:inline-block。可能会奏效。

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