web-dev-qa-db-ja.com

画像とテキストをクライアントメールテンプレート間で垂直方向に揃える方法

<table cellspacing="0" cellpadding="0" border="0">
 <tbody>
   <tr>
     <td width="20">&nbsp;<img height="12" alt="" src="/CmpImg/2010/22677/924228_immunotec_bullet.gif" width="12"></td>
     <td valign="top"><span style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; COLOR: rgb(0,0,0); LINE-HEIGHT: 16px; PADDING-TOP: 0px; FONT-FAMILY: Arial; TEXT-ALIGN: left">Reliable service team, deployed to your location, at your convenience</span></td>
   </tr>
 </tbody>
</table>

Outlookに上記のコードがあります。正常に表示されますが、Gmail、Yahoo、Hotmailでは、箇条書きとテキストが上に垂直に配置されず、テキストの上部にパディングがあるように見えます。何か案は？

htmlcsshtml-email
21
user1417094

端的に言えば、今日の午後に行ったテストでは、Outlookがtd要素のvalignプロパティをサポートしているように見えますが、gmailとそれ以外はvertical-align cssルールが必要です。 Gmailはインラインタグのみをサポートし、スタイルタグはサポートしないため、次のようにする必要があります。

<table>
  <tr>
    <td valign="top" style="vertical-align:top;"></td>
  </tr>
</table>

また、doctypeを宣言してください。これが<html>要素の上にあることを確認してください：

<!DOCTYPE html>
27
David Meister

このコードを使用

<table cellspacing="0" cellpadding="0" border="0">
   <tbody>
   <tr>
   <td width="20" align="left" valign="top">&nbsp;<img height="12" alt="" src="/CmpImg/2010/22677/924228_immunotec_bullet.gif" width="12" align="top"></td>
   <td align="left" valign="top"><span style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; COLOR: rgb(0,0,0); LINE-HEIGHT: 16px; PADDING-TOP: 0px; FONT-FAMILY: Arial; TEXT-ALIGN: left">Reliable service team, deployed to your location, at your convenience</span></td>
   </tr>
   </tbody>
   </table>
6
Carlos

まず、メールの一般的な方法として、すべての画像に表示ブロックと通常はborder：noneを配置します。次に、デフォルトで問題が発生する可能性があります。 tdのすべてのスタイルを設定します。特定の間隔が必要な場合は、継承を回避するために、tdでフォントサイズと行の高さを1pxに設定します。最初のtdでvalign topも必要になる場合があります。説明から、どの部分が並んでいないのか本当にわかりません。あなたのメールで頑張ってください。

5
mikevoermans