12

SOに関する他の多くの回答のように、HTMLメールは本当に古い学校のレイアウトを使用する必要があることを理解しています(例: HTMLメール: テーブルまたはdiv?、CSSを使用したHTMLメール)。

ただし、電子メールでスペーサー gif を使用することが依然として良い考えであるかどうかについては、いくつかの議論があるようです。

たとえば、次の 3 つのレイアウトを比較します。

寸法:

<table cellpadding="0" cellspacing="0" border="0" width="100">
  <tr>
    <td width="100" height="10"></td>
  </tr>
</table>

スペーサー GIF 付き:

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td><img src="spacer.gif" width="100" height="10"></td>
  </tr>
</table>

スペーサー GIF と寸法:

<table cellpadding="0" cellspacing="0" border="0" width="100">
  <tr>
    <td width="100" height="10"><img src="spacer.gif" width="100" height="10"></td>
  </tr>
</table>

ディメンションでそれらを使用するにはどうすればよいですか? スペーサー gif を必要とする電子メール クライアントはありますか? どちらにしても害はありますか？

4

4 に答える 4

13

個人的には、スペーサー gif を使用することはありません。これは、画像のブロックをオフにするとレイアウトが破壊されるためです。これには 3 つの理由があります。

  1. それらがまったくレンダリングされない場合、スペーサー イメージを必要とするレイアウトはすべて失われます。
  2. それらが正しくレンダリングされない場合 (元のサイズに戻す、または元のサイズに比例するなど)、レイアウトが崩れます。
  3. それらが適切にレンダリングされ、レイアウトが機能する場合でも、画像のブロックがオンになっているときに表示されるすべての画像プレースホルダーは、電子メールのメッセージから注意をそらします.

問題 2 を回避するには、各画像を実際の寸法で保存します。ただし、これは明らかに増加します。

  • 構築する時間
  • クライアントがダウンロードする画像の数

そして、それは問題 #1 と #3 を解決しません。

スペーサー gif を使用する理由は、一部のクライアント (Outlook 2007、Outlook 2010、Lotus Notes、Hotmail / Live Mail) が空のセルをレンダリングしないためです。テキスト ノードの寸法に対して絶対的な精度を持たせることは非常に難しいため、スペーサー イメージで十分です。ただし、前述のクライアントでさえ、幅が定義された空のセルをレンダリングします。

したがって、空のセルにピクセル幅を定義している限り、問題ありません。質問の例に戻るには:

  • ディメンションのみ - すべての主要な電子メール クライアントで画像ブロックの有無にかかわらず動作します
  • スペーサー イメージのみ - イメージ ブロッキングがオフになっている場合にのみ機能します
  • 寸法とスペーサー画像 - 画像のブロックがオフになっている場合にのみ機能します

このため、スペーサー gif ではなく寸法を使用する必要があります。

この質問については、さまざまな記事でも取り上げられています (ページで「スペーサー イメージ」を検索してください)。

于 2012-05-24T06:20:34.563 に答える
3

スペーサー gif の使用は確実に避けることができます。

次のコードがすべてのクライアントで機能することがわかりました。通常、これらの空のセルの幅または高さを指定します。この特定の例は、垂直方向のスペースを作成するために使用するものです。

<tr>
 <td style="line-height: 0; font-size: 0;" height="10">&nbsp;</td>
</tr>
于 2012-05-30T01:51:12.280 に答える
2

セルを 19 ピクセル (Outlook の最小の既定の高さ) よりも高くしておくと、line-height を使用する必要がなくなり、シンプルな機能が<td height="20">&nbsp;</td>うまく機能します。例：

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td align="center">
      top
    </td>
  <tr>
  </tr>
    <td height="20">
      &nbsp;
    </td>
  <tr>
  </tr>
    <td align="center">
      bottom
    </td>
  </tr>
</table>

ただし、垂直方向の間隔については、ほとんどの場合、それを避けて、行の上下にパディングを追加できます。

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td align="center">
      top
    </td>
  <tr>
  </tr>
    <td align="center" style="padding-top:20px;">
      bottom
    </td>
  </tr>
</table>

またはこのように、パディングなしで：

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td align="center">
      top
    </td>
  <tr>
  </tr>
    <td align="center">
      &nbsp;<br>
      bottom
    </td>
  </tr>
</table>

&nbsp;<br>の代わりに使用した最後の例に注意してください<br>。これは、内容のない行またはセルが Outlook によって折りたたまれるためです。&nbsp;これは、元の例でもスペーサーセルに a があるのと同じ理由です。下に複数の行またはパディングを追加すると、次のようになります。

<td align="center">
  &nbsp;<br>
  &nbsp;<br>
  &nbsp;<br>
  bottom
  <br>&nbsp;
  <br>&nbsp;
  <br>&nbsp;
</td>

スペーサーセルを使用しない 2 つのオプションには、いくつかの利点があります。1 つ目は、より高速で、含まれるコードが少ないことです。2 つ目は、誰かがあなたの電子メールを Outlook から転送したときに、より一貫して表示されることです。Outlook の優れた MS Word エンジンはすべてを<p>タグでラップするため、行間に避けられないギャップが追加されます。行を 1 つ減らすことで、メールを元のデザインに近づけることができます。

于 2013-12-19T14:27:54.427 に答える
1

注: Outlook 2007/2010 は空のセルをスペースとして扱います。AND は、デフォルトのテキストと背景色の属性をそれらに適用します。（したがって、ユーザーが紫色の背景が好きな場合、色のないセルは紫色の背景が透けて見えます）。

このフォーマットをオフセットするには、空のスペーサー セルを次のようにします。

<td width=(a percentage or a pixel width) height=(optional unless needed) bgcolor="#FFFFFF(always use 6 digit hex!)" style="font-size:1px; line-height:1px;")>&nbsp;</td>
于 2013-03-14T14:55:51.100 に答える