ie7 css с div выравнивают вправо в TD

Question

Разметка ниже производит 2 строки текста, со второй строкой текста по центру и изображением в правом нижнем углу во второй строке. По крайней мере, в Firefox и ie8. В ie7 это добавляет разрыв строки, и изображение появляется на 3-й строке. Я пробовал все виды вещей безуспешно, и, например, Developer Tool не очень полезен.

Как мне заставить его правильно отображаться (например, ie8) в ie7?

<table>
    <tr><td>blah blah blah blah</td></tr>
    <tr>
        <td style="text-align:center;">
            Hi
            <div style="float:right; background-image:url('aaa.png'); height:16px; width:16px;">
            </div>
        </td>
    </tr>
</table>

Это просто очень упрощенная версия того, что у меня есть; Мне нужна структура таблицы, поэтому, пожалуйста, не предлагайте изменить ее на серию divs:)

Answer 1

Вы не устанавливаете ширину таблицы, поэтому она будет настолько малой, насколько это возможно, чтобы вместить содержимое.

Попробуйте также поставить "Hi" в div (или span) с плавающей запятой влево.Теоретически это должно работать.

Возможно, вы захотите поместить обе стороны в промежутки, подумайте об этом, так как div по умолчанию соответствует размеру их родителя (-border, margin и padding).

Надеюсь, это поможет.

С уважением,

Ричард

Редактировать: Фактический ответ на это заключается в том, чтобы установить позицию правостороннего div на абсолютное значение,высота / ширина до 16px, сверху и справа до 0. Также удалите float: right.(Я оставил свой первоначальный ответ там, чтобы а) комментарии имели смысл и б) любой, кто прочитает это в будущем, знает, что оригинальный ответ не сработал).

Answer 2

Вы можете попробовать поменять местами порядок "Привет" и <div>:

<table>
    <tr><td>blah blah blah blah</td></tr>
    <tr>
        <td style="text-align:center;">
            <div style="float:right; background-color: #f00; height:16px; width:16px;"></div>
            Hi
        </td>
    </tr>
</table>

Это выглядит одинаково в Chrome, Safari, Firefox, IE7, IE8 и Opera. Chrome, Safari и Firefox отображают обе версии одинаково; IE7 и Opera отображают оригинальную версию с той же проблемой.

Я изменил background-image на background-color, чтобы я мог видеть, что происходит, не должно иметь никакого эффекта на рендеринг, но IE7 довольно умен для создания беспорядка, поэтому, возможно, нет.