Html IE不'；t正确对齐文本和图像

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

在关闭“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>

试试这个

<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属性。
使用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>


更改IE版本并检查代码。此外，IE的另一个特点是使用spans。我也会尝试将span移到标记之前。IE8对span元素有问题吗？我在IE7中看到过这种情况。但是当文本名称较长时，其余文本会放在图像下，然后使用
min width:200px
而不是
span元素中的
width:200px
为什么要定义alt 2时间？
在span元素中使用左边的填充，并从中删除float属性。
您能解释一下这样做的原因吗？