gmail 以不同方式显示 HTML 电子邮件签名答案

【问题标题】：HTML e-mail signature is disaplayed differently by gmailgmail 以不同方式显示 HTML 电子邮件签名
【发布时间】：2018-03-26 11:39:09
【问题描述】：

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

编辑：我意识到我没有具体说明问题：当我在 GMail 网络收件箱上检查 Opera 中的元素时，我看到整个文本被格式化为 Arial，12.8 像素，而在第一行失去了不同的颜色(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>

【问题讨论】：

仅仅看它我就发现了一个错误：style="link" 不是一个有效的 css 属性。请改用 class="link"。 Style 用于像这样的直接样式： style="color:blue; font.weight:bold;"
Html 和 css 错误可能会导致您遇到的问题。你能告诉我你拿了我的sn-p后错误是否仍然出现吗？
您好，感谢您的宝贵时间！我尝试过使用“类”（可耻的错误），但 GMail 显示第一行的方式没有改变（没有颜色，字体大小不同）。
您好，我注意到您的问题仍然没有明确的解决方案。这是因为您只是忘记了，还是您的问题仍未得到解答？我很乐意为您的案例提供进一步帮助，否则请将此问题标记为已解决，因为它可以帮助其他用户在 stackoverflow 上获得更好的体验。
您好，感谢您的提醒。经过更多的实验，我几乎放弃了，但后来我使用了你的建议，学会了如何正确使用内联样式。看起来 HTML 签名应该基于内联 CSS，因为样式不使用一致呈现。现在我可以自己写答案，或者你可以按照你的想法写 - 你更喜欢哪个，@TimGerhard？

标签： html css gmail signature

【解决方案1】：

编辑：

您可以使用内联样式来设置您的电子邮件的样式，因为不完全支持类名（就我而言）。使用 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=""

【讨论】：

严重错误，感谢您的宝贵时间。然而，即使使用我们的代码也不会改变 GMail 上第一行（名称）的显示方式。
您写道您在 Opera 中使用 gmail。我认为这可能与浏览器有关，因为您的电子邮件在我的 gmail 上完美显示。尝试在其他浏览器甚至手机中打开 gmail 并告诉我此问题是否仍然存在
Chrome 和 IE 都检查过，错误是一样的。我希望我没有做一些愚蠢的事情。我已经检查过我使用的是签名的更正版本（我是）。一旦我将它从 Thunderbird 发送到 Gmail，部分样式就丢失了。当我尝试在在线 HTML 代码查看器（例如 Tryit）中查看它时，它按预期工作。更换浏览器不会改变任何东西。
可能和雷鸟有关。有时邮件程序会覆盖样式。您可以尝试内联样式（例如：设置 style="color:blue; font-size:12pt" 而不是 class="someclass"）。也许可行
似乎确实不可靠地支持 CSS 类。将所有 CSS 更改为内联证明可以解决问题，谢谢！