1

我正在为客户准备一个新的电子邮件模板。我希望它对移动设备友好，并且在尽可能多的电子邮件客户端/浏览器中看起来不错。在网上看了下，MJML.io 似乎很受欢迎，在研究这个主题时被推荐。

我要使用 Bootstrap 查找电子邮件。我是第一次使用 MJML。它非常漂亮，我只是想知道它生成的 HTML。

我想指出，我非常了解 HTML。我知道所有的代码是什么，做什么。我不知道 100% 它对各种电子邮件客户端/浏览器的影响以及它们如何处理呈现电子邮件的 HTML。所以我可以把这段代码清理干净，去掉多余的内联样式，让我的强迫症快乐。但是，我不想破坏响应能力。即：我不想删除多余的样式并破坏 Outlook，或破坏 Yahoo 等。

下面是一个例子。有一张主桌，里面有另一张桌子。我明白了。那么整个表格只是为了一个空行？然后我们有一个包含许多 TR 的表。我也明白。但是，有p一个定义了样式的标签，然后span在它的内部设置了另一个样式。似乎是多余的。此外，它还多次定义了基本字体。

我可以通过在 parent 中设置字体系列、字体大小、字体颜色来简化这一点table吗？或者是否有某种原因在最低元素级别多次定义它？我看看这个，我只想在正文、第一个 div 或主表中设置一个基本字体，p 用于文本设置，然后spans 用于当我需要不同的大小、重量、颜色等时。

我只是不知道这是否是电子邮件客户端兼容性魔法酱的一部分，我不想打破它哈哈。CSS、头部等都是来自 MJML.io 的库存，我知道有些客户会去掉头部，这意味着那里的样式将被忽略。所以我没有包括它，只是下面重要的部分：

<body style="background: #bedae6;">
  <div style="background-color:#bedae6;">
    <!--[if mso | IE]>
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
      <tr>
        <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
    <![endif]-->
    <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" border="0">
      <tbody>
        <tr>
          <td>
            <div style="margin:0px auto;max-width:600px;">
              <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
                <tbody>
                  <tr>
                    <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:10px;padding-top:10px;">
                      <!--[if mso | IE]>
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:middle;width:600px;">
                      <![endif]-->
                      <div aria-labelledby="mj-column-per-100" class="mj-column-per-100 outlook-group-fix" style="vertical-align:middle;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                        <table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:middle;" width="100%" border="0">
                          <tbody>
                            <tr>
                              <td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;padding-right:25px;padding-left:25px;" align="center">
                                <div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:11px;line-height:22px;text-align:center;">
                                  <p style="font-size: 11px"><span></span>
                                  </p>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                      <!--[if mso | IE]>
                        </td></tr></table>
                      <![endif]-->
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <!--[if mso | IE]>
      </td></tr></table>
    <![endif]-->
    <!--[if mso | IE]>
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
      <tr>
        <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
    <![endif]-->
    <div style="margin:0px auto;max-width:600px;background:#ffffff;">
      <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#ffffff;" align="center" border="0">
        <tbody>
          <tr>
            <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:20px;padding-top:10px;">
              <!--[if mso | IE]>
                <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
              <![endif]-->
              <div aria-labelledby="mj-column-per-100" class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                <table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
                  <tbody>
                    <tr>
                      <td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left">
                        <div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;">
                          <span style="display: block; font-size: 28px; font-weight: bold;">
                            <span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">
                              <strong>
                                <span style="font-size: 20px;">
                                  <span style="color: rgb(81, 45, 11);">Hello {{NAME}},</span>
                          </span>
                          </strong>
                          </span>
                          </span>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left">
                        <div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;">
                          <p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;">
                            <span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">
                              <span style="font-size: 18px;">This is the body of my email.</span>
                            </span>
                          </p>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="left">
                        <table cellpadding="0" cellspacing="0" style="cellspacing:0px;color:#000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;" width="100%" border="0">
                          <tr>
                            <td style="padding: 0 15px 0 0;">1995</td>
                            <td style="padding: 0 15px;">PHP</td>
                            <td style="padding: 0 0 0 15px;">C, Shell Unix</td>
                          </tr>
                          <tr>
                            <td style="padding: 0 15px 0 0;">1995</td>
                            <td style="padding: 0 15px;">JavaScript</td>
                            <td style="padding: 0 0 0 15px;">Scheme, Self</td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                    <tr>
                      <td style="word-break:break-word;font-size:0px;padding:25px 30px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="center">
                        <table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
                          <tbody>
                            <tr>
                              <td style="border:none;border-radius:0px;color:#FFFFFF;cursor:auto;padding:10px 25px;" align="center" valign="top" bgcolor="#8bb420">
                                <a href="https://mjml.io" style="text-decoration:none;line-height:100%;background:#8bb420;color:#FFFFFF;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:16px;font-weight:normal;text-transform:none;margin:0px;" target="_blank">
                                  <strong>Click here to go now !</strong>
                                </a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr>
                      <td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left">
                        <div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;">
                          <p></p>
                          <p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Thank You,</span>
                          </p>
                          <p></p>
                          <span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">{{COMPANY_NAME}}</span>
                          <p></p>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
                </td></tr></table>
              <![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]>
      </td></tr></table>
    <![endif]-->
    <!--[if mso | IE]>
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
      <tr>
        <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
    <![endif]-->
    <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" border="0">
      <tbody>
        <tr>
          <td>
            <div style="margin:0px auto;max-width:600px;">
              <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
                <tbody>
                  <tr>
                    <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:10px;padding-top:10px;">
                      <!--[if mso | IE]>
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:middle;width:600px;">
                      <![endif]-->
                      <div aria-labelledby="mj-column-per-100" class="mj-column-per-100 outlook-group-fix" style="vertical-align:middle;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                        <table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:middle;" width="100%" border="0">
                          <tbody>
                            <tr>
                              <td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;padding-right:25px;padding-left:25px;" align="center">
                                <div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:11px;line-height:22px;text-align:center;">
                                  <p style="font-size: 11px"><span></span>
                                  </p>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                      <!--[if mso | IE]>
                        </td></tr></table>
                      <![endif]-->
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <!--[if mso | IE]>
      </td></tr></table>
    <![endif]-->
  </div>
</body>

--

我想清理它，从主体和内部 div 开始，通过设置字体、背景、填充等一次......

<body style="background: #bedae6; color:#000000; font-family:'Open Sans', Ubuntu, Arial, sans-serif; font-size:11px; line-height:22px">
  <div>
    // ....
  </div>
</body>

另一个例子，它将字体大小设置为 0，然后在子元素中设置实际字体大小，声明填充两次.. 到底是什么：

<tr>
    <td style="font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left">
        <div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;">
            <p></p>
            <p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Thank You,</span>
            </p>
            <p></p>
            <span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">{{COMPANY_NAME}}</span>
            <p></p>
        </div>
    </td>
</tr>
4

1 回答 1

2

我会尽我所能解决你所有的顾虑！

所以基本上有些客户端不允许在某些元素中使用 css，比如旧的 Outlook 和一些 Gmail 变体。Like Padding 仅支持用于 Outlook 的 P 和表元素。最重要的是，一些客户端处理 css 继承非常糟糕，因此您必须确保最深的节点具有 css 而不是将其分组到父节点中。关于 font-size 0 这是避免块之间空间的技巧

这就是为什么你有一些看起来多余的 css，它们在这里是为了确保模板在所有支持的客户端上看起来都是一样的。

MJML 有一些默认的 MJ 属性（您可以在 mj-head 中使用 mj-attributes 覆盖），它们将转换为 CSS 属性。就像您所说的填充一样，您可以同时使用填充和填充顶部/底部/右侧/左侧，它们可以单独使用，但使用一个不会覆盖另一个。

如果你想清理它，你可以使用 mj-attributes “重置”默认属性。

您需要考虑的其他问题是为空行生成的 HTML 的复杂性。您有多种方法可以使用 MJML 处理此问题（带有填充的空白部分，带有列和 mj-spacer 的空白部分，有时甚至是带有 mj-raw 的“原始”html），这取决于您正在处理的设计。

在设备和客户端之间保持高水平的兼容性需要在输出 HTML 的可读性方面做出一些牺牲。但是，我们正在尽最大努力清理输出 HTML，因为某些客户端（例如 Gmail）对电子邮件有一些大小限制

于 2017-01-02T17:58:16.333 回答