Question

下面的标记产生2行文本，第2行文本居中，图像位于第2行右下角。至少它在Firefox和ie8中。在ie7中，它添加了一个换行符，图像出现在第3行。我已经尝试了各种各样的事情但没有成功，即开发者工具也不是很有用。

如何让它在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）评论有意义，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相当聪明地制作了一堆东西，所以也许不是。

ie7 css，div与TD对齐

2 个答案: