Sendgrid 在我的模板代码上方添加额外的 HTML 和 CSS答案

【问题标题】：Sendgrid add extra HTML and CSS above my template codeSendgrid 在我的模板代码上方添加额外的 HTML 和 CSS
【发布时间】：2021-08-05 03:18:54
【问题描述】：

我正在使用 Sendgrid 中的一个非常简单的表格和一些文本创建一个动态模板。这封电子邮件将发送给几乎完全在 Outlook 桌面上查看的内部员工，因此我不太担心一致性或兼容性。在我所有的测试电子邮件中，正文都是居中而不是一直向左。我查看了源代码并玩弄了它，直到我终于意识到我的内容上方有一个表格，其样式为max-width:600px;，这导致它更小且居中。一旦我移除了那个造型，它就会像我想要的那样把我的身体一直推到左边。

所以我想弄清楚的是如何删除 Sendgrid 添加到源中的所有垃圾 HTML 和 CSS。或者至少删除 600 像素的最大宽度。

以下是一些示例代码，它们会自动添加到所有发送的电子邮件中：

<body>
      <center class="wrapper" data-link-color="#1188E6" data-body-style="font-size:14px; font-family:arial,helvetica,sans-serif; color:#000000; background-color:#FFFFFF;">
        <div class="webkit">
          <table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#FFFFFF">
            <tr>
              <td valign="top" bgcolor="#FFFFFF" width="100%">
                <table width="100%" role="content-container" class="outer" align="center" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <td width="100%">
                      <table width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                          <td>
                            <!--[if mso]>
    <center>
    <table><tr><td width="600">
  <![endif]-->
                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:600px;" align="center">

我真的不明白为什么电子邮件需要至少有 4 个嵌套表！最后一个表格标签是最大宽度所在的位置。

没有其他我知道的设置。这是我在编辑器中的代码截图：

添加关于正在发生的事情的视觉表示以提供更好的帮助。

电子邮件的正文居中，我只希望它左对齐。

【问题讨论】：

您的模板是使用 SendGrid 拖放编辑器还是代码编辑器？
使用代码编辑器
嗯，我发现代码编辑器只发送我提供的代码，但是使用拖放编辑器时，你并没有控制标记。我刚刚使用代码模板进行了快速测试，我刚刚在<body> 中直接添加了一个<h1>，它就是这样交付的。您为此添加了其他设置吗？您能否显示您如何编辑此模板的屏幕截图？
在没有任何视觉线索的情况下很难理解你想要做什么。在 Outlook 桌面客户端中使用 html+css 非常棘手，我不会太在意 html 的数量，因为包装表格是在那里实现某些布局的唯一方法。但是，如果您需要特定的布局，我们将无法仅使用没有视觉布局结构的 html 提供帮助。

标签： html css sendgrid

【解决方案1】：

我过去使用带有 ROR 的 SendGrid 构建时事通讯，我发现代码被转换为内联代码，因此可以在许多其他电子邮件提供商中阅读，我们发现这个名为 amp 的产品实际上可以让我们使用非内联样式 css。

我建议采用这种方法，或者将内联样式编码为 max-with:600px;到首选的宽度并在不同的提供商、Gmail、Outlook、Ios 等上运行多个测试。

正如您提到的，时事通讯创建者不会发送发送时事通讯所需的代码，而是将内容转换为内联。

amp link

demonstration

    <html ⚡4email data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <!--[if (gte mso 9)|(IE)]>
    <xml>
        <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Mexdev - Newsletter service</title>

    <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>


<body style="background-color:#F5F5F5; overflow: auto;">
<div>
        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout:fixed; background-color:#F5F5F5;" id="bodyTable">
            <tbody><tr>
                <td align="center" valign="top" id="bodyCell">
                <!--[if (gte mso 9)|(IE)]><table align="center" border="0" cellspacing="0" cellpadding="0" style="width:620px;" width="620"><tr><td align="center" valign="top"><![endif]-->
                <table border="0" cellpadding="0" cellspacing="0" style="max-width:480px;" width="100%" class="wrapperTable">
                <tbody>
                    <tr>
                        <td align="center" valign="top" class="wrapperCell">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapperPreHeader">
                                <tbody>
                                <tr>
                                    <td align="center" valign="top" style="padding-left:10px;padding-right:10px;">
                                    <!-- Email PreHeader Open //-->
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="emailPreHeader">
                                        <tbody><tr>
                                            <td align="right" valign="top" style="padding: 20px;">
                                            </td>
                                        </tr>
                                    </tbody></table>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapperHeader">
                                <tbody>
                                <tr>
                                    <td align="center" valign="top" >

    <!-- Email der Open //-->
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="emailHeader" style="border-radius: 10px; background: white; margin-bottom: 20px;">
                                        <tbody>
                                            <tr>
                                                <td align="center" valign="middle" style="padding: 40px 20px 20px;" class="emailLogo">
                                                <!-- Logo and Link  // -->
                                                <a href="#" target="_blank" style="text-decoration:none;">
                                                    <img src="https://firebasestorage.googleapis.com/v0/b/mexdev-40fff.appspot.com/o/logos%2Ffavicon%20-%20Copy.png?alt=media&token=83158426-51b5-40c2-9423-9756710c79f0" alt="" width="80" >
                                                </a><br>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" valign="middle" style="padding-bottom: 5px; padding-left: 20px; padding-right: 20px;" class="emailTitle">
                                                <!-- Email Header Title  // -->
                                                <p class="bigText" style="color:#A5A5A5; font-family: 'Poppins'; font-size:30px; font-weight:400; font-style:normal; letter-spacing:normal; line-height:32px; text-transform:none; text-align:center; padding:0; margin:0;">
                                                Mexdev - Newsletter service
                                                </p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" valign="middle" style="padding-bottom: 40px; padding-left: 20px; padding-right: 20px;" class="emailTimeStamp">

    <!-- Cool Bar -->         <div style="height: 1.5px; margin-top: 20px; margin-right: 20px; margin-left: 20px; border-radius: 3px; background-image: linear-gradient(200deg, #00a8ff 10%, #7460c5 39%, #02d0ff 80%);"></div>
                          <br><br><br>
                                            <!-- Email Time Stamp  // -->
                                                <p class="smlText" style=" color:#999999; font-family: 'Poppins'; font-size:11px; font-weight:400; line-height:20px; font-style:normal; letter-spacing:normal; text-transform:none; text-align:center; margin:0; padding:0;">
                                                
</td>
</tr>
</tbody>
</table>
</td>
</tbody>
</table>


</div>

</body>
</html>

只是分享我的经验，我希望它可以帮助你按计划进行风格。

【讨论】：