当我包含我的签名时，我的电子邮件中的深色模式为黑色字体

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

我正在尝试创建一个 HTML-CSS 电子邮件签名。 但这是我的问题：当我从 Apple Mail 发送或从带有签名的 Outlook web 在 Apple Mail 上接收电子邮件时，即使在黑暗模式下它也会正确显示，另一方面在电子邮件正文中（我不应该在其中显示进行了干预！！）即使在黑暗模式下，文本也会显示为黑色，这使得它不可读！我对 HTML-CSS 编程的了解非常有限，我真的不明白问题出在哪里！

从 outlook web 发送带有签名的电子邮件时，我还有另一个问题：我的电子邮件进入收件人的垃圾邮件文件夹。 x_x

真希望有人能告诉我如何解决这些问题！

这是 Apple 邮件的结果，签名上方有文字（深色模式下为黑色！）：

enter image description here

我附上我的HTML，放纵我是一个伟大的新手。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <title>Signature</title>
  <!--[if gte mso 9]>
        <xml>
        <o:OfficeDocumentSettings>
        <o:AllowPNG/>
        <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
        </xml>
        <![endif]-->
  <style type="text/css">
   :root {
      color-scheme: light dark;
      supported-color-schemes: light dark;
    }
    a {
      margin: 0;
      padding: 0;
      border: none;
      text-decoration: none;
    }
  }
  @media (prefers-color-scheme: dark) {
    body: {
      color: #ffffff
    }
  }
  </style>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="format-detection" content="address=no" />
  <meta name="format-detection" content="email=no" />
  <meta name="color-scheme" content="light dark" />
  <meta name="supported-color-schemes" content="light dark" />
</head>
<body style="font-family:'Barlow','Arial','Tahoma','Trebuchet','Helvetica','sans-serif'">
  <br/>
  <table role="presentation" class="darkmode" style="max-width: 350px ; padding: 15px">
    <tr style="border-collapse: collapse">
      <td style="padding-right: 10px; padding-left: 0px ; padding-top: 0px ; padding-bottom: 0px ; margin:auto ; vertical-align:middle">
        <a href="https://www.siteinternet.blabla">
          <img src="https://i.postimg.cc/XjqZ6KZp/logo-hp-1024.png" alt="[LOGO]" title="Allé sur le site internet" width="50" style="width:50px">
        </a>
      </td>
      <td colspan="2" style="padding: 0px ; text-align: left ; line-height: 1.3 ; font-size: 10pt">
        <b>Jean Dupont</b>
        <br/> Marketing
        <br/>
        <a style="font-size: 9pt" title="Télécharger les coordonnées" href="https://qrco.de/">> Télécharger la fiche contact</a>
      </td>
    </tr>
    <tr style="border-collapse: collapse; padding: 0px">
      <td colspan="3" style="height: 10px"></td>
    </tr>
    <tr style="height:20px ; padding: 0px ; border-collapse: collapse">
      <td>&nbsp;</td>
      <td style="vertical-align:middle ; text-align: center; padding:3px; padding-left: 0px">
        <img src="https://i.postimg.cc/gkWw93V6/mobile-RVB-2-PNG24.png" alt="•" title="Portable" width="10" style="width:10px">
      </td>
      <td valign="middle" style="font-size: 10pt">
        <a title="Téléphoner" href="tel:+33644444444">+33(0) 7 44 44 44 44</a>

      </td>
    </tr>
    <tr style="height:20px ; padding: 0px; border-collapse: collapse">
      <td>&nbsp;</td>

      <td style="vertical-align:middle ; text-align: center ; padding:3px; padding-left: 0px">
        <img data-imagetype="External" src="https://i.postimg.cc/G3P7CGr6/old-phone-max30px-RVB.png" alt="•" width="13" style="width:13px" title="Fixe">
      </td>
      <td valign="middle" style="font-size: 10pt">
        <a title="Téléphoner" href="tel:+33455555555">+33(0) 4 55 55 55 55</a>
      </td>
    </tr>
    <tr style="height:20px ; padding: 0px ; border-collapse: collapse">
      <td></td>
      <td style="vertical-align:middle ; text-align: center ; padding:3px; padding-left: 0px">
        <img src="https://i.postimg.cc/Nf4z1TzR/mail-max30px-RVB.png" alt="•" title="Mail" width="12" style="width:12px">
      </td>
      <td valign="middle" style="font-size: 10pt">
        <a title="Envoyer un mail" href="mailto:[email protected]">[email protected]</a>
      </td>
    </tr>
    <tr style="height:20px ; padding: 0px ; border-collapse: collapse">
      <td>&nbsp;</td>
      <td style="vertical-align:middle ; text-align: center ; padding:3px; padding-left: 0px">
        <img src="https://i.postimg.cc/s2XdBKfB/globe-max30px-RVB.png" alt="•" title="Site internet" width="13" style="width:13px">

      </td>
      <td valign="middle" style="font-size: 10pt">
        <a title="Visiter le site internet" href="https://www.siteinternet.blabla">www.siteinternet.blabla</a>
      </td>
    </tr>
    <tr style="padding: 0px ; border-collapse: collapse">
      <td colspan="3" style="height: 10px"></td>
    </tr>

    <tr style="height : 16px; padding: 0px ; border-collapse: collapse">
      <td>&nbsp;</td>
      <td style="vertical-align:middle ; text-align: center ; margin:auto; padding:3px; padding-left: 0px">
        <img src="https://i.postimg.cc/MTQLRFCG/location-pin-max30px-RVB.png" alt="•" width="9.6" style="width:9.6px" title="Adresse">
      </td>
      <td valign="middle" style="text-align: left ; padding-bottom:0; font-size: 10pt">
        <b>Compagnie</b>
      </td>

    </tr>
    <tr style="padding: 0px ; border-collapse: collapse">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td style="padding-top:0 ; line-height: 1.3; font-size: 9pt">
        <b>Agence Malibu</b>
        <br/> Zone industriel
        <br/> 110, rue des marguerites
        <br/> 32000 Marlou-les-bains

      </td>
    </tr>
  </table>
</body>
</html>

html css email signature darkmode
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.