0

我在尝试在 Android 和 iOS 上的某些邮件客户端应用程序上显示边框时遇到问题。边框在 Web 浏览器和桌面客户端（如 ThunderBird 或 Outlook）上正确显示。

在 Android 上的实际结果，Yahoo 删除了强制内联样式。 在此处输入图像描述

这次在 iOS 上使用 Gmail 的实际结果移除了强制内联样式。 在此处输入图像描述

MJML 代码：

<mjml>
  <mj-head>
    <mj-style>
      .foo-title { margin-bottom: 0; white-space: nowrap; } .foo-sub-title { color: rgba(0,0,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€&lt;/p>
              <p class="foo-sub-title">Total</p>
            </td>
            <td style="border: 3px solid black !important; padding: 15px;">
              <p class="foo-title">0,00€&lt;/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>

生成的 HTML

<table cellpadding="0" cellspacing="0" width="100%" border="0" style="color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;border:none;">
    <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€&lt;/p>
            <p class="foo-sub-title">Total</p>
        </td>
        <td style="border: 3px solid black !important; padding: 15px;">
            <p class="foo-title">0,00€&lt;/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>
</table>
4

1 回答 1

1

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

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

于 2021-05-19T22:52:08.733 回答