1

私は電子メールを作成していますが、別の画像 (コールトゥアクションボタン) を別の画像の上に配置する必要があります。次のコードでは、いくつかのクライアントでしか機能しません:

<tr>
    <td align="center" width="660" height="457" valign="top"><img width="660" height="457" style="display:block; vertical-align:top; margin:0; padding:0; outline:none; border:none;" src="image_1.jpg" />
    <a href="http://www.facebook.com/LurpakButter/app_299490026832067"><img width="341" height="56" style="display:block; vertical-align:top; margin-top:-300px; padding:0; outline:none; border:none;" src="cta.png" /></a></td>
</tr>

これを行うより良い方法はありますか？

4

3 に答える 3

5

Gmail では、スペーシングpaddingの代わりに使用しますmargin。Diodeus が言及したように、campaignmonitorは優れたリソースです

于 2012-11-13T16:55:11.613 に答える
2

メールがテーブルの背景画像をサポートしていないという事実を回避しようとしているようです（とにかくクライアント間で一貫して）。の賢いアイデアmargin-top:-300;ですが、期待どおりに機能していないようです。（cssマージンは全面的にサポートされていません）。

目的のレイアウトを取得するために私が知っている唯一の方法は、背景画像を小さなブロックに分割することです。

<table width="660" border="0" cellpadding="0" cellspacing="0">
  <tr>    
    <td width="660" colspan="3">
      <img width="660" height="100" style="margin: 0; border: 0; padding: 0; display: block;" src="image_1.jpg" />
    </td>
  </tr>
  <tr>    
    <td width="60">
      <img width="60" height="50" style="margin: 0; border: 0; padding: 0; display: block;" src="image_1.jpg" />
    </td>
    <td width="300">        
      <a href="http://www.facebook.com/LurpakButter/app_299490026832067"><img width="300" height="50" style="margin: 0; border: 0; padding: 0; display: block;" src="cta.png" /></a>
    </td>
    <td width="300">
      <img width="300" height="50" style="margin: 0; border: 0; padding: 0; display: block;" src="image_1.jpg" />
    </td>
  </tr>
  <tr>    
    <td align="center" width="660" colspan="3">
      <img width="660" height="100" style="margin: 0; border: 0; padding: 0; display: block;" src="image_1.jpg" />
    </td>
  </tr>
</table>

または、1つの大きな画像を作成して画像のマッピングを行うこともできますが、それはおそらく行動を促すためのベストプラクティスではありません。

于 2012-11-13T16:50:01.833 に答える
2

多くのメール クライアントでクライアント領域からコンテンツがジャンプしたり漏れたりする可能性のある配置およびその他の多くの CSS 機能が制限されています。そのため、多くのメール クライアントでは要素を重ねて配置することはできません。

Web ベースのクライアントの場合、これのほとんどは、電子メールがクライアント機能を偽装するのを防ぐために意図的に行われます。MS-Outlook の場合、非常にくだらない MS-WORD レンダリング エンジンを使用するだけの問題です。

ここでは、何を使用できるかについての良いガイドを示します。

http://www.campaignmonitor.com/css/

于 2012-11-13T15:56:55.360 に答える