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>

IE ビュー

クロム ビュー

Chrome では正しくレンダリングされますが、IE ではレンダリングされません。これを修正する方法は？IE で条件付き CSS を使用する必要がある場合、IE の正しいコードは何ですか?

4

3 に答える 3

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>
于 2013-08-27T05:38:58.823 に答える
0

スパンの代わりに div タグを使用すると、問題が解決しました。

<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 に答える