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

Question

在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的正确代码是什么？

Answer 1

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

 <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>

Answer 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。

Answer 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>