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

Question

我正在尝试将图像下的两个链接调整为文本，我得到的HTML在Chrome和Firefox中完美运行，但是在IE中却无法使用，我们90％的内部用户都是HTML。

这是代码。

    <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

a标签是自然inline-block努力你设置a以display: block; 与图像标签相同。 在您的CSS中定位图片并添加display: block; 对此

我没有IE，但可以尝试以下方法：

JSFIDDLE

Answer 2

我没有要测试的IE，但请尝试为div设置一个固定的宽度。

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