带有div的ie7 css在TD中右对齐

Question

下面的标记产生 2 行文本，第 2 行文本居中，右下角的图像位于第 2 行。至少在 Firefox 和 ie8 中是这样。在 ie7 中，它添加了一个换行符，图像出现在第 3 行。我尝试了各种方法都没有成功，ie Developer Tool 也不是很有用。

如何让它在 ie7 中正确显示（如 ie8）？

<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>

这只是我所拥有的非常简化的版本；我需要表格结构，所以请不要建议将其更改为一系列 div :)

Answer 1

你没有在桌子上设置任何宽度，所以它会尽可能小以适应内容。

也可以尝试将“Hi”放在一个 div（或 span）中，并向左浮动。从理论上讲，这应该可行。

实际上，您可能希望将两边都放在跨度中，想想看，因为 div 默认为其父级的大小（-border、margin 和 padding）。

希望这会有所帮助。

问候，

理查德

编辑：对此的实际答案是将右侧浮动 div 的位置设置为绝对，高度/宽度设置为 16px，顶部和右侧设置为 0。同时删除 float: right。 （我把原来的答案留在那里，以便 a）cmets 有意义，b）以后读到这个的人都知道原来的答案不起作用）。

Answer 2

您可以尝试颠倒“Hi”和<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 很擅长把事情弄得一团糟，所以也许不会。