2

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

4

3 回答 3

1

您的“跨度”标签在您关闭“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>
于 2013-08-27T05:38:58.823 回答
1

尝试这个，

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

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

于 2013-08-27T05:40:38.497 回答
0

使用 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>
于 2013-08-27T08:34:03.083 回答