HTML 电子邮件模板深色模式背景问题仅适用于 iPhone 11、12 Mini 版本，可编辑文本下

问题描述 投票：0回答：1

我们的 html/oft 电子邮件模板仅在 iPhone 11、12 Mini 版本的深色模式视图中存在问题。

此问题仅发生在可编辑文本下，在实现深色模式 CSS 的文本帖子下应显示黑色背景颜色，就像在其他设备上显示的那样。

Please refer attached error screenshot for more clarity, the is a editable part in the edm

我知道 EDM 行为有时非常不稳定，但显然当它由与我们合作的自由开发人员通过 OFT 模板发送和测试时，它在上述 iOS 设备上显示良好。

我更改了暗模式的元配色方案，如以下参考中所述，但它不起作用：https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers

这是我的代码在 head 标签下的样子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" style="padding:0;Margin:0">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">

CSS for dark mode only:
<style>
@media (prefers-color-scheme: dark) {
.darkmode {
    background-color: #000000;
}
.darkmode h1, .darkmode p, .darkmode span, .darkmode a {
    color: #ffffff;
  }
}
</style>
</head>

身体下方：

<body class="darkmode">
<table bgcolor="#000000" class="wd_full" width="600" border="0" align="center" cellpadding="0" cellspacing="0"  style="font-family: Arial, 'sans-serif'; font-size:15px; line-height:22px; color:#1B1D24; text-decoration:none; mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#000000">
  <tr style="border-collapse:collapse">
    <td bgcolor="#000000" style="border:1px solid #d2d2d2; background-color: #000000;"><table class="wd_full" bgcolor="#000000" width="600" align="center" border="0" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#000000" role="presentation">
        <tbody>
          <tr style="border-collapse:collapse">
            <td bgcolor="#ffffff" style="background-color: #ffffff;" align="left" valign="top"><img src="http://gallery.mailchimp.com/2425ea8ad3/images/header_placeholder_600px.png" width="600" height="200" alt="" style="display: bnlock; width: 100%;"/></td>
          </tr>
          
          <tr style="border-collapse:collapse">
            <td bgcolor="#000000"  align="left" valign="top" style="background-color: #000000; background-image: url('https://demo.pulsecomms.com/test/black_bg.png'); background-repeat: repeat;">&nbsp;</td>
          </tr>
          <tr style="border-collapse:collapse">
            <td bgcolor="#000000"  align="left" valign="top" style="background-color: #000000; background-image: url('https://demo.pulsecomms.com/test/black_bg.png'); background-repeat: repeat;"><table bgcolor="#000000" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#000000" role="presentation"  align="center" width="520" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td><div style="width: 526px; background-color: #000000; font-family: 'Forma DJR Micro', Arial; font-size:14px; line-height:18px; color:#ffffff; ">Dear &lt;Name&gt;, </div></td>
                </tr>
              </table></td>
          </tr>
          <tr style="border-collapse:collapse">
            <td bgcolor="#000000" style="background-color: #000000;" align="left" valign="top"><img src="https://apacdemo.transmissionagency.com/test/images/header_placeholder_600px_3.png" width="600" alt="Some other image" style="display: bnlock; width: 100%;"/></td>
          </tr>

          <tr style="border-collapse:collapse">
            <td bgcolor="#000000" style="background-color: #000000;" align="left" valign="top"><a href="#" target="_blank"><img src="https://apacdemo.transmissionagency.com/test/images/register_now_new.png" width="600" alt="" style="display: bnlock; width: 100%;"/></a></td>
          </tr>
          <tr style="border-collapse:collapse">
            <td bgcolor="#000000"  align="left" valign="top" style="border-collapse:collapse; background-color: #000000; background-image: url('https://demo.pulsecomms.com/test/black_bg.png'); background-repeat: repeat;"><table bgcolor="#000000"  align="center" width="520" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#000000" role="presentation">
                <tr>
                  <td><div style="width: 526px;  background-color: #000000 !important; font-family: 'Forma DJR Micro', Arial; font-size:14px; line-height:18px; color:#ffffff;"><br />
                      <br />
                      We look forward to meeting you at the event.<br />
                      <br />
                      Regards,<br>
                      &lt;Sender Name&gt;<br>
                      &lt;Title&gt; </div></td>
                </tr>
              </table></td>
          </tr>
          <tr style="border-collapse:collapse">
            <td bgcolor="#000000" style="background-color: #000000;" align="left" valign="top">&nbsp;</td>
          </tr>
          <tr style="border-collapse:collapse">
            <td bgcolor="#000000" style="background-color: #000000;" align="left" valign="top">&nbsp;</td>
          </tr>
        </tbody>
      </table></td>
  </tr>
   
</table>
</body>

我还在代码笔中创建了我的代码的副本

[here](https://codepen.io/LXR10/pen/NWJbWaJ)
：

论坛的高手可以指导一下吗，万分感谢。

html css html-email email-templates ios-darkmode
1个回答
0
投票

不确定这些设备上的确切怪癖，但有一个可能相关的旧错误。

但首先，第一段和第二段之间确实存在差异。第二个，你有一个“！重要”，但第一个没有。

<div style="width: 526px;  background-color: #000000 !important;...

我建议完全删除 div，因为它是不必要的。要保留字体或颜色或其他文本样式，只需使用 

<span>
。

现在，存在一个影响纯白色 iPhone 的错误，它不尊重该特定颜色（特别是媒体查询中的#ffffff）。我不确定这是否也会影响#000000，但有可能。解决方案是使用#fffffe 或#000001。您可以在这里阅读更多信息：https://github.com/hteumeuleu/email-bugs/issues/65。但首先要解决第一件事。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.