Question

我正在尝试将图像下的两个链接作为文本对齐，我在Chrome和Firefox中使用的HTML非常完美，但是在我们90％的内部用户不在IE中。

这是代码..

    <div style="float: right;"><img src="sites/default/files/recog.png" width="419" height="465" style="border: 6px double #7a9a01;" /><br />
    <p style="text-align: right;"><a href="webform/world-of-thanks">Click to Nominate Online!</a></p>
    <p style="text-align: right;"><a href="hr/files/world-thanks-nomination-form/attachment/newest">Print your nomination form here.</a></p>
    </div>
    <h2>"A World of Thanks!" program</h2>
    <p>The “World of Thanks!” program is a collection of...</p>

在Chrome中，上面的HTML显示左侧的文字和内容，图片将显示在右侧，图片下方的链接文字位于右侧。

在IE中，链接首先显示在左侧，然后是文本，图像显示在右边，因为它应该..但不知何故在IE中，链接不在图像下面，而是它们将离开它。

有什么想法吗？我做错了什么？

IE中的

错误.. https://oppy.com/it/ie_broken.png
在Chrome中更正.. https://oppy.com/it/correct_chrome_only.png

Answer 1

我没有IE测试，但尝试为div设置固定宽度。

<div style="float: right; width: 431px;">

Answer 2

a代码自然会inline-block尝试将a设置为display: block;与图片代码相同。定位css中的图片并将display: block;添加到该图片

我没有IE，但试试这个：

JSFIDDLE

如何使用HTML / CSS对齐图像下的文本？

2 个答案: