17

非常にシンプルなhtmlメールを作成しました。 http://staging.xhtml-lab.com/mailtest/

hotmail.com/outlook.com を除くすべてのメール クライアントで問題なく動作しています。

hotmail のメールは左揃えで、中央揃えのままにする必要があります。

emailology.org の提案に従って次のコードを追加しましたが、効果はありません。

<style type=“text/css”&gt;
/**This is to overwrite Hotmail’s Embedded CSS************/
table {border-collapse:separate;}
a, a:link, a:visited {text-decoration: none; color: #00788a} 
a:hover {text-decoration: underline;}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important}
p {margin-bottom: 0}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%}
/**This is to center your email in Hotmail************/
.ExternalClass {width: 100%;}
</style>

メールセンターを調整するために他に何ができるかについての提案はありますか?

4

4 に答える 4

41

これにより、中央に配置された電子メールが表示されます。

<table style="width: 100%; background: red;">
  <tr>
    <td>
      <center>
        <table style="width: 640px; background: blue; margin: 0 auto; text-align: left;">
          <tr>
            <td>
              Your content here
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

center-tag は、Outlook と outlook.com で必要なものです。他のクライアントはこのmargin属性を使用します。一部のクライアントでは、center-tag の後にテキストが中央に配置されるため、このtext-align属性が必要です。

画面サイズに応じて幅を可変にしたい場合は、次のコードを使用します。

<table style="width: 100%; background: red;">
  <tr>
    <td>
      <center>
        <!--[if mso]>
        <table style="width: 640px;"><tr><td>
        <![endif]-->
        <div style="max-width: 800px; margin: 0 auto;">
          <table style="background: blue; text-align: left;">
            <tr>
              <td>
                Your content here
              </td>
            </tr>
          </table>
        </div>
      </center>
      <!--[if mso]>
      </td></tr></table>
      <![endif]--> 
    </td>
  </tr>
</table>

Outlook は をサポートしていないmax-widthため、サイズは Outlook の 640px に固定されています。他のすべてのクライアントの場合、電子メールの幅は表示ウィンドウの幅と同じになりますが、最大 800px です。

これらのソリューションが機能しないクライアントを見つけた場合はお知らせください。できるだけ多くのクライアントで機能するソリューションを見つけることができます。

于 2013-08-12T11:25:29.777 に答える
4

これは私が作成したもので、すべてのメールの出発点として使用しています。すべての主要な電子メール クライアントで 100% 動作します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title></head>
<body style="margin: 0px; padding: 0px background-color: #FFFFFF;" bgcolor="#FFFFFF"><!-- << bg color for forwarding (leave white) // main bg color >> --><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td>
<!-- CENTER FLOAT WIDTH -->
<table width="600" border="0" valign="top" align="center" cellpadding="0" cellspacing="0"><tr><td><!-- Master Width of the center panel -->
preheader...
<!-- CENTER PANEL BG COLOR (to hide separation of tables on email forward from Outlook (known issue) -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"><tr><td><!-- Master Color of the center panel -->

content...

<!-- /CENTER BG COLOR -->
</td></tr></table>

<!-- /CENTER FLOAT WIDTH -->
</td></tr></table>
<!-- /CENTER FLOAT -->
</td></tr></table></body></html>

誰かがメールを転送するときのために、白い背景が組み込まれています (html で設計された部分の背景は色付きのままですが、白で入力できます)。また、メイン パネルには bgcolor が設定されています。これは、Outlook が転送時にテーブル間にギャップを設けるためです。

それが役立つことを願っています。

于 2012-11-20T16:22:00.467 に答える