我无法在 HTML 电子邮件中使用此 header

Question

我正在尝试在 MailChimp 上制作模板，但无法正确设置样式。不过有一些注意事项：CSS 样式必须是 in-line 并且必须被构造为 <table> 标签。

到目前为止，这是我的代码：

  <section id="header" style="background-color: #148e97;">
    <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
        <tr>
            <td align="center" valign="top">
                <table border="0" cellpadding="20" cellspacing="0" width="600" id="emailHeader">
                    <tr>
                        <td align="right" valign="">
                          <div class="socialMediaIcons">
                            <img src="img/facebook.png"/>
                            <img src="img/twitter.png"/>
                            <img src="img/mail.png"/>
                            <img src="img/linkedin.png"/>
                          </div>
                        </td>
                    </tr>
                </table>
                <table id="title" width="500">
                  <tr>
                    <td align="left" valign="">
                        <img src="img/logo.png"/>
                    </td>
                    <td style="">
                      <h1 style="text-align: right; "
                    style="font-family: arial;">Brand USA E-News -- April 2016</h1>
                  </td>
                  </tr>
              </table>
            </td>
        </tr>
    </table>
  </section>

Answer 1

创建 HTML 电子邮件时，您需要将自己带回过去，回到 Internet Explorer 6 很酷的时代。

您不能使用 <section id="header"> 或 class="socialMediaIcons"，因为并非所有电子邮件客户端都支持 <style> 标签。 HTML5 个元素最不受支持，您的 CSS 需要内联并与 style="..." 属性一起使用。电子邮件客户端中有很多 mixed support for CSS，因此您不得不迎合最低公分母。

以下代码为您提供了如何创建布局的起点：

<html>
    <body style="margin: 0; padding:0">
        <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#fff">
            <tr>
                <td valign="center">
                    <div style="background-color: #148e97; width:660px; margin:auto;">
                        <table border="0" cellpadding="0" cellspacing="0" height="100%" width="660" bgcolor="#148e97">
                            <tr>
                                <td width="30">
                                    <img src="http://placehold.it/1x1" width="30" alt="Spacer">
                                </td>
                                <td width="130">
                                    <img src="http://placehold.it/130x115" alt="Logo">
                                </td>
                                <td valign="top" width="500">
                                    <table border="0" cellpadding="0" cellspacing="0" height="100%" width="500">
                                        <tr>
                                            <td>
                                                <img src="http://placehold.it/1x1" width="1" height="20" alt="Spacer">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="right">
                                                <div class="socialMediaIcons">
                                                    <img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
                                                    <img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
                                                    <img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
                                                    <img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="right">
                                                <h1 style="text-align: right; font-family: arial; color: #fff;">Brand USA E-News -- April 2016</h1>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td width="30"><img src="http://placehold.it/1x1" width="30" alt="Spacer"></td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>

您会注意到，在其他 <table> 标签中有很多 <table> 标签，甚至更多 <table> 标签。事情变得一团糟。

我使用了 spacer.gif 的老派技术（使用 http://placehold.it/1x1 代替 1x1.gif 图像），这些天在构建 [=33 时不再需要=]网站.

希望这段代码能让您走上正确的道路。我已经 5 年多没有建立 HTML 电子邮件了，所以我有点生疏了。

我无法在 HTML 电子邮件中使用此 header

I can't get this header working in a HTML email

html

css

html-email

mailchimp