强制电子邮件客户端应用程序不删除表格边框

问题描述

我无法在 Android 和 iOS 上的某些邮件客户端应用程序上显示边框。边框在网络浏览器和桌面客户端（如 ThunderBird 或 Outlook）上正确显示。

Android 上的实际结果，Yahoo 移除了强制内联样式。

这次在 iOS 上使用 Gmail 删除强制内联样式的实际结果。

MJML 代码：

--------------------------------------------------------------------------------
  \d+                      digits (0-9) (1 or more times (matching
                           the most amount possible))
--------------------------------------------------------------------------------
  \s*                      whitespace (\n,\r,\t,\f,and " ") (0 or
                           more times (matching the most amount
                           possible))
--------------------------------------------------------------------------------
  [gt]                     any character of: 'g','t'
--------------------------------------------------------------------------------
  b                        'b'
--------------------------------------------------------------------------------
  \s*                      whitespace (\n,and " ") (0 or
                           more times (matching the most amount
                           possible))
--------------------------------------------------------------------------------
  ddr                      'ddr'
--------------------------------------------------------------------------------
  [l2]                     any character of: 'l','2'
--------------------------------------------------------------------------------
  (?!                      look ahead to see if there is not:
--------------------------------------------------------------------------------
    \s*                      whitespace (\n,and " ") (0
                             or more times (matching the most amount
                             possible))
--------------------------------------------------------------------------------
    \d+                      digits (0-9) (1 or more times (matching
                             the most amount possible))
--------------------------------------------------------------------------------
    \s*                      whitespace (\n,and " ") (0
                             or more times (matching the most amount
                             possible))
--------------------------------------------------------------------------------
    [gt]                     any character of: 'g','t'
--------------------------------------------------------------------------------
    b                        'b'
--------------------------------------------------------------------------------
  )                        end of look-ahead

生成的 HTML

<mjml>
  <mj-head>
    <mj-style>
      .foo-title { margin-bottom: 0; white-space: Nowrap; } .foo-sub-title { color: rgba(0,.8); margin-top: 0; font-size: 14px; margin-bottom: 0; white-space: Nowrap; font-size: 14px; }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-section padding-top="0" padding-bottom="0">
      <mj-column width="100%">
        <mj-table css-class="foo" border="none" cellpadding="0" cellpadding="0">
          <tr>
            <td colspan="2" style="border: 3px solid black !important; padding: 15px;">
              <p class="foo-title" style="font-size: 35px;">0Z00</p>
              <p class="foo-sub-title" style="padding-top:5px">Localizador</p>
            </td>
            <td style="border: 3px solid black !important; padding: 15px;">
              <p class="foo-title">29/03</p>
              <p class="foo-sub-title">2021</p>
            </td>
          </tr>
          <tr>
            <td style="border: 3px solid black !important; padding: 15px;">
              <p class="foo-title">TEE 00</p>
              <p class="foo-sub-title">Salida</p>
            </td>
            <td style="border: 3px solid black !important; padding: 15px;">
              <p class="foo-title">00:00</p>
              <p class="foo-sub-title">Hora</p>
            </td>
            <td style="border: 3px solid black !important; padding: 15px;">
              <p class="foo-title">1</p>
              <p class="foo-sub-title">Jugadores</p>
            </td>
          </tr>
          <tr>
            <td colspan="3" style="border: 3px solid black !important;padding: 5px 15px;">
              <p style="font-size: 16px;">Green fees 9 hoyos</p>
            </td>
          </tr>
          <tr>
            <td style="border: 3px solid black !important; padding: 15px;">
              <p class="foo-title">0,00€</p>
              <p class="foo-sub-title">Total</p>
            </td>
            <td style="border: 3px solid black !important; padding: 15px;">
              <p class="foo-title">0,00€</p>
              <p class="foo-sub-title">Pago realizado</p>
            </td>
            <td style="border: 3px solid black !important; padding: 15px;">
              <p class="foo-title">0,00€ *</p>
              <p class="refooserva-sub-title">Pago pendiente</p>
            </td>
          </tr>
          <tr>
            <td colspan="3" style="border: none !important; padding: 15px;"></td>
          </tr>
          <tr>
            <td style="border-bottom: 3px solid black !important; border-left: 3px solid black !important; border-right: 3px solid black !important; border-top: none !important; padding-bottom: 0; padding-top: 15px; padding-left: 15px; padding-right: 15px; font-size: 14px;" colspan="3">
              <p style="pading-top:0; margin-top: 0">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
              <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
            </td>
          </tr>
        </mj-table>
      </mj-column>
    </mj-section>

  </mj-body>
</mjml>

解决方法

某些电子邮件客户端不喜欢特定的格式，例如 !important，并且会删除整个样式部分（如果存在）。

此外，最好对颜色使用 HEX 格式（即 #000000 不是“黑色”），尽管我认为所有电子邮件客户端都知道黑色是什么，但许多人对其他颜色的解释不一致（并且从内存 Windows 10 应用程序不喜欢rgb格式）。