HTML电子邮件签名在Gmail中显示不同

Question

HTML电子邮件签名在Gmail中显示不同

3

我使用Thunderbird作为我的主要工作邮件客户端。我刚创建了一个新的HTML签名，在Thunderbird、Opera和在线HTML查看器中都显示正确，但在Gmail上却不行。如果有人能指出问题所在，我将不胜感激。我已附上.html签名文件。

编辑：我意识到我没有说明问题所在：当我在Gmail网页收件箱上使用Opera检查元素时，我发现整个文本格式被设置为12.8像素的Arial字体，同时第一行（class = .name）失去了不同的颜色。

我的CSS非常生疏，所以我怀疑错误在于我自己...

编辑2：以下是由Tim Gerhard更正后的代码（非常感谢！）

<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <style type="text/css">
      .normal{font-family:"Arial"; font-size:9pt; line-height:1.25; color:#606060; font-weight:400}
      .name{font-size:10.5pt; color:rgb(119,187,65); font-weight:700;}
      .link{color:rgb(17,85,204)}
    </style>
  </head>
  <body>
    <div class="normal">
      <span class="name">Rostislav Janda</span></br>
      Obchodní zástupce</br></br>
      <a style="link"; href="tel:+420%20721%20604%20707" value="+420721604707" target="_blank">+420 721 604 707</br>
      <a style="link"; href="http://www.iqbudovy.cz"> www.iqbudovy.cz</a>
      </br></br>
      IQ Budovy s.r.o.</br>
      <a style="link"; href="[map link]">Mečířova 5, 612 00 Brno</a></br></br>
      <img alt="IQ_Logo" src="[image address]">
      <br><br><br>
    </div>
  </body>
</html>

- Rostislav Janda

1

仅从外观上看，我就发现了一个错误：style="link" 不是有效的 CSS 属性。请改用 class="link"。Style 用于直接样式设置，例如：style="color:blue; font.weight:bold;"。 - Tim Gerhard

HTML和CSS错误可能会导致您遇到的问题。请问在使用我的代码片段后，这些错误是否仍然存在？ - Tim Gerhard

你好，感谢您的时间！我尝试使用"class"（糟糕的错误），但是在GMail中显示第一行时没有任何变化（没有颜色，字体大小不同）。 - Rostislav Janda

你好，我注意到你的问题仍未标记解决方案。这是因为你忘记了还是你的问题仍未得到解答？如果需要进一步帮助，请告诉我，否则请将此问题标记为已解决，以便其他用户在stackoverflow上获得更好的体验。 - Tim Gerhard

你好，感谢你的提醒。在进行了更多的尝试后，我差点放弃了，但是我使用了你的建议并学会了如何正确地使用内联样式。看起来 HTML 签名应该基于内联 CSS，因为样式不一致。现在我可以自己写答案，或者你可以写出来，就像是你的想法一样 - 你更喜欢哪种方式，@TimGerhard？ - Rostislav Janda

嗨，我很高兴能够引导你朝着正确的方向前进。我编辑了我的答案，如果你愿意，你可以将其标记为解决方案。 - Tim Gerhard

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim Gerhard · Accepted Answer

编辑：

由于类名的支持并不完整（就我所知），您可以使用内联样式来为电子邮件设置样式。请使用style="color:red"，而不是类。内联样式应该在每个邮件程序中都有效。

你的HTML存在很多错误，这可能导致了问题。

我花时间修复了它，现在这是正确的标记：

<html>

  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <style type="text/css">
      .normal {
        font-family: "Arial";
        font-size: 9pt;
        line-height: 1.25;
        color: #606060;
        font-weight: 400;
      }

      .name {
        font-size: 10.5pt;
        color: rgb(119, 187, 65);
        font-weight: 700;
      }

      .link {
        color: rgb(17, 85, 204);
      }

    </style>
  </head>

  <body>
    <div class="normal">
      <span class="name">Rostislav Janda</span><br/>
      Obchodní zástupce<br/>
      <br/>
      <a class="link" href="tel:+420%20721%20604%20707" value="+420721604707" target="_blank">+420 721 604 707</a><br/>
    <a class="link" href="http://www.iqbudovy.cz"> www.iqbudovy.cz</a>
      <br/>
      <br/>
      IQ Budovy s.r.o.<br/>
      <a class="link" href="[map link]">Mečířova 5, 612 00 Brno</a><br/>
      <br/>
      <img alt="IQ_Logo" src="[image address]"/>
      <br><br><br>
    </div>
  </body>
</html>

出了什么问题？：

您错误地使用了<br>标签。应该是<br/>而不是</br>
其中一个图像标记未正确关闭
其中一个超链接（<a>）未关闭
您使用了style =“”而不是class =“”