IE 无法正确对齐文本和图像答案

【问题标题】：IE doesn't align text and image properlyIE 无法正确对齐文本和图像
【发布时间】：2013-08-29 17:47:28
【问题描述】：

在 Chrome 图像中，文本链接正确对齐。但是，当我在 IE8 上查看时，我注意到图像和文本链接没有正确对齐。

这是我使用的代码。这是我在 Wordpress wpfilebase 模板中使用的代码。

<td style="width:350px;padding-left:20px;">
    <a href="%file_url%"> 
       <img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" />
    </a>
    <span style="width:200px;float:right;vertical-align:text-top;">
    <a href="%file_url%"> %file_display_name%</span></a>
</td>

Chrome 可以正常呈现，但 IE 不能。如何解决这个问题？如果我需要对 IE 使用条件 CSS，IE 的正确代码是什么？

【问题讨论】：

你更改IE版本并检查你的代码。

标签： html css internet-explorer html-table

【解决方案1】：

您的“span”标签在您关闭“a”标签之前关闭。更正代码：

 <td style="width:350px;padding-left:20px;">
   <a href="%file_url%"> 
     <img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" />
   </a>
   <span style="width:200px;float:right;vertical-align:text-top;"> 
     <a href="%file_url%">%file_display_name%</a>
  </span>
</td>

【讨论】：

另外，IE 的另一件事是跨度的使用。我也会尝试在标签之前移动跨度。
IE8的span元素有问题吗？
我已经看到它发生在 IE7 上。

【解决方案2】：

试试这个，

<td style="width:350px;padding-left:20px;" valign="top"><!--use valign top here -->
    <a href="%file_url%"> 
     <img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" alt="img" />
    </a>
    <span style="width:200px;padding-left:10px;vertical-align:text-top;"> <!--remove float and add padding here-->
     <a href="%file_url%">%file_display_name%</a><!--anchor tag should be closed here-->
    </span>
</td>

在span元素中使用padding-left并从中删除float property。

【讨论】：

但是当文本名称较长时，其余文本将位于图像下方
然后在span element中使用min-width:200px而不是width:200px
为什么要定义两次alt？
Use padding-left in span element and remove float property from it. 你能解释一下这样做的原因吗？

【解决方案3】：

使用 div 标签而不是 span，解决了我的问题。

<td style="width:350px;padding-left:20px;" valign="top"><!--use valign top here -->
    <div style="float:left;"><a href="%file_url%"> 
     <img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" alt="img" />
    </a></div>
    <div style="max-width:200px;padding-left:10px;vertical-align:text-top;"> <!--remove float and add padding here-->
     <a href="%file_url%">%file_display_name%</a><!--anchor tag should be closed here-->
    </div>
</td>

【讨论】：