6

Outlook 2013 を除くすべての主要な電子メール クライアントで問題なく表示される HTML 電子メールを作成しています。Outlook 2013 では、画像スライス間に垂直方向のギャップが追加されています。残念ながら、コンピューターに Outlook 2013 がインストールされていないため、テストが難しくなっていますが、クライアントからのスクリーンショットは次のようになっていることを示唆しています -問題のあるギャップのスクリーンショット

私のコードはここから入手できます - HTML バージョン。

ギャップを取り除くためにこれ以上何ができるかわかりません-tdsと画像の行の高さをゼロに設定し、画像を表示するように設定しました:ブロック、テーブルを境界線に設定しました0、cellpadding と cellspacing ゼロ、および border-collapse: 崩壊。それを修正するために他に何ができますか？

追加するように編集 - ギャップが画像と表の行の間にあるかどうかは実際にはわかりません。スクリーンショットから、実際にはテーブルの行のように見えます。

4

3 に答える 3

14

問題は解決しました - 画像を含む tds の行の高さを 0 ではなく画像の高さに変更すると、ギャップが解決され、他のクライアントのレイアウトが壊れなくなります。そう

    <td width="150" style="line-height: 83px;">
       <img src="" height="83px">
    </td>
于 2013-11-08T14:36:12.823 に答える
3

レイアウト全体が間違っているため、問題が発生しています。時計の画像を複数の部分に分割する必要はありません。また、タイトルの文字「DS」を中央に含む画像を使用するべきではありません。

レイアウトが複雑なため、colspans とネストされたテーブルを使用することをお勧めします。これは、画像を細かく分割するよりもクリーンな手法です。水平にカットされた画像は常に問題を引き起こします。最初の送信ではない場合、転送された場合、Outlook はそこにギャップを強制します。画像を切り取る必要がある場合は、すべてのクライアントで完全に元のままになるように、垂直に切り取るようにしてください。

また、ほとんどのクライアントはデフォルトで画像をブロックするため、すべての CTA (行動を促すフレーズ) と重要なコピー/テキストを画像ではなく html に含めることをお勧めします。また、画像とテキストの比率が悪いメールもスパムと見なされます。

これを試してください：

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top" width="450">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="top" width="400" style="padding:30px;">
           Fall in love with...
          </td>
          <td valign="top" width="50"> <!-- It is easier to split an image vertically -->
            <img alt="Ring Overhang" src="" width="50" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td colspan="2" valign="top" width="450">
            <img alt="Shop now screenshots" src="" width="450" height="200" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td colspan="2" valign="top" width="450" style="padding-top:30px; padding-bottom:30px;">
            Luxury Watch Brands  <!-- Titles like this should always be in text not images -->
          </td>
        </tr>
        <tr>
          <td colspan="2" valign="top" width="450">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="150">
                  <img alt="Watch 1" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
                <td width="150">
                  <img alt="Watch 2" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
                <td width="150">
                  <img alt="Watch 3" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td valign="top" colspan="3" width="250">
      <table width="250" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            <img alt="Ring Image" src="" width="250" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td>
            <img alt="Big Watch" src="" width="250" height="450" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td>
            Shop Luxury Watches >   <!-- Call to actions are better in text not images -->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
于 2013-11-08T14:12:07.727 に答える
0

電子メール送信者にとって最適な出力は、画像を垂直方向 (水平方向ではなく) にスライスし、1 行にネストされた複数に配置することで実行できます。すべてのクライアントで問題なく動作します

于 2014-11-25T04:16:53.137 に答える