代码之家 › 专栏 › 技术社区 › JumpingJezza

ie7 css,div在TD中右对齐

internet-explorer-7 internet-explorer css html

1

JumpingJezza · 技术社区 · 14 年前

下面的标记生成两行文本,第二行文本居中,右下角的图像位于第二行。至少在Firefox和ie8中是这样。在ie7中,它添加了换行符,图像显示在第三行。我尝试过各种各样的东西都没有成功,而ie开发工具也不是很有用。

如何使它在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:)

2 回复 | 直到 11 年前

1

2

ClarkeyBoy 14 年前

您没有在表上设置任何宽度,因此它将尽可能小,以适合内容。

试着把“Hi”放在一个div(或span)中,让float左移。从理论上讲,这应该是可行的。

你可能想把两边都放在跨距中,实际上,可以这样想,因为div默认为其父级的大小(-border,margin和padding)。

希望这有帮助。

当做,

理查德

编辑:实际的答案是将右浮动div的位置设置为绝对,高度/宽度设置为16px,顶部和右侧设置为0。同时删除 float: right . (我把我原来的答案放在那里,以便a)这些评论是有意义的;b)以后读到这篇文章的人都知道原来的答案不起作用)。

2

0

mu is too short 14 年前

你可以试着把“嗨”和 <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在把事情弄得一团糟方面相当聪明,所以可能不会。