0

HTMLとCSSだけを使ってメールマガジンをやっています。それはすべてテーブルにあり、div、コピー、マージン、パディングはありません。gmail では問題なく動作しますが、hotmail でテストすると、行間にスペースができます。すべての行のセルに画像があり、そのほとんどがサイトにリンクしています。display:block や collapsing のような別の css を試しましたが、運がありません... アイデアはありますか?

ここに私のコードがあります:

<style type="text/css">
/* Client-specific Styles */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */

/* Reset Styles */
*, body {
    padding:0;
    margin:0;
    border:0;
    border:none;
    outline:none;
    font-size: 0px;
}
img, a img  {
    border:0;
    border:none;
    text-decoration: none;
    padding:0;
    margin:0;
    display:block;
}
table tr, table td, table th { border: 0; margin: 0; padding: 0; }
table, table td {
    border-collapse: collapse;
}
#backgroundTable {
    height: 100% !important;
    margin: 0;
    padding: 0;
    width: 100% !important;
}
p {
   margin: 1em 0;
}
h1, h2, h3, h4, h5, h6 {
   color: black !important;
   line-height: 100% !important;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   color: blue !important;
}

h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {
       color: red !important; /* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */
   }

h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
   color: purple !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
}
   table td {
   border-collapse:collapse;
}
.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span { color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;} 

/* Template Styles */
body, #backgroundTable {
    background-color: #000000;
}

</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
<tr>
<td align="center" valign="top"><table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader">
<tr>
<td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="600"><a href="#" target="_blank"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-HEADER.png" alt="Header" /></a></td>
  </tr>
  <tr>
<td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="600"><a href="#" target="_blank"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-PROMO.png" alt="Content" /></a></td>
  </tr>

  <tr>
<td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="600"><a href="#" target="_blank"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-NOTE.png" alt="Note" /></a></td>
  </tr>
    </table></td></tr>
  <tr>
<td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="600"><table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="600">
      <tr>
<td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="469"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-FOLLOW.png" alt="Follow Us" /></td>
       <td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="30"><a href="#" target="_blank"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-FACEBOOK.png" alt="Facebook" /></a></td>

       <td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="33"><a href="#" target="_blank"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-TWITTER.png" alt="Twitter" /></a></td>

       <td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="30"><a href="#" target="_blank"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-YOUTUBE.png" alt="YouTube" /></a></td>

       <td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="38"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-SPACE02.png"  alt="Follow Us" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
<td align="center" valign="top" border="0" cellpadding="0" cellspacing="0" width="600"><img style="display:block; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border:0; border:none;" border="0" src="images/TEMPLATE-RIGHTS.png" alt="Copyright" /></td>
  </tr>
   </td>
  </tr> 
  </table>
  </td>
  </tr>
</table>
</center>
</body>
</html>
4

4 に答える 4

2

私が同様の問題を抱えていたとき、私はtdに追加しました：

valign="top" align="left"

そしてimgに：

style="border:none; vertical-align:top"

次に例を示します。

<td valign="top" align="left"><a href="#"><img style="border:none; vertical-align:top" src="#" /></a></td>

これがお役に立てば幸いです。

于 2013-02-04T15:13:08.477 に答える
2

私はあなたのコードをチェックしましたが、いくつかフラグを立てておきたいことがありました。

プロパティ、 サポート/サポートされていないクライアント

  1. width CSS プロパティ RISKY Outlook 07、Notes 6、Eudora
  2. background-color CSS プロパティ POOR Notes 6、Eudora
  3. margin CSS プロパティ RISKY AOL 9、Notes 6、Eudora、Live Mail、Hotmail
  4. padding CSS プロパティ POOR Notes 6、Eudora
  5. border CSS プロパティ POOR Notes 6、Eudora
  6. border-collapse CSS プロパティ RISKY Entourage 2004、Notes 6、Eudora
  7. 高さ CSS プロパティ RISKY Outlook 07、Notes 6、Eudora、Old GMail
  8. CSS プロパティの表示 POOR Outlook 07、Eudora

埋め込まれたスタイルをすべて削除することをお勧めします。一部のスタイルはさまざまなブラウザー/電子メール クライアントで検出されず、インラインに配置されるためです。インライン スタイルはより適切に機能し、クロス ブラウザーでの使用に対してより安定しています。また、電子メール テンプレートは通常、さまざまな EDM で 1 回だけ使用されるか、わずかに変更されているようです。これは、すべてのスタイルをインラインに配置しても非常に安全であることを意味します。

例えば

<div style="color:red; width:100px; border:1px solid green;"></div>

お役に立てれば。

于 2013-01-25T00:01:06.557 に答える
2

Scrappedcola は正しいです... eDM にはインライン スタイルを使用する必要があります。

さまざまな電子メール クライアントでサポートされている内容に関する役立つ情報は、http: //www.campaignmonitor.com/css/にリストされています。

また、Litmus テストを実行して、すべての主要な電子メール クライアントで電子メールが正しく表示されることを確認することもできます: http://litmus.com/

于 2013-01-24T23:32:35.040 に答える
1

スタイルタグに配置するよりも、インラインcssを作成する方が幸運です。IEはヘッダーを取り除き、レンダリング中に独自の要素を追加します。1990年のようなコード。テストする良い方法は、Outlookで電子メールを開き、Webページを「名前を付けて保存」してブラウザで開くことです。あなたはまさに大混乱の見通しがもたらしたのを見ることができます。

msdn.microsoft.com/en-us/library/office/…見通しでcssを使用する方法に関する公式の言葉（別名「MSFTがWeb開発者をどれだけ嫌うか」）

于 2013-01-25T16:12:28.527 に答える