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 s и дать элементы display:inline-block. Мог бы работать.

3. Если это не удастся, используйте условный комментарий для цели IE7 (например, <!--[if IE 7]>) и примените ширину к td s.

Answer 2

Я предлагаю удалить любую позицию в коде, когда вы пишете tds, чтобы вам не нужно было позиционировать.