HTML电子邮件签名

debugcn 发表于 Dev

罗尼

我正在尝试制作HTML电子邮件签名。

我已经设法按照我希望的方式获得它，但是与Web上的Outlook相比，在Outlook客户端中查看签名时似乎发生了一些奇怪的事情，请参见下图。

这是在网络上查看时的样子。

这就是在Outlook客户端中查看时的样子。

这是我的HTML。

<html>
<body>
  <img src="https://static1.squarespace.com/static/5755c2b9356fb0c7e2943cf6/t/58800e158419c2ec7abbbd80/1484787227067/TheTest_banner_r2.png?format=2500w" width="571" height="168">

  <div class="links" style="font-size: 15px;">
    <a href="#"><p>Test</p></a><p> | </p>
    <a href="#"><p>Test</p></a><p> | </p>
    <a href="#"><p>Test</p></a><p> | </p>
    <a href="#"><p>Test</p></a><p> | </p>
    <a href="#"><p>Test</p></a><p> | </p>
    <a href="#"><p>Test</p></a>
  </div>

  <p style="font-size: 11px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br/>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>

</body>
</html>

这是我的CSS。

p {
  font-family: Georgia;
  color: rgb(22, 31, 53);
}
a {
  color: rgb(22, 31, 53);
}
.links p {
  color: rgb(22, 31, 53);
  display: inline;
}

https://codepen.io/atomicaltv/pen/rogxMO

阿加什·塔莫（Agash Thamo）。

好的，看来Outlook不喜欢更改显示属性。我打开你的代码一点，所以它使用范围元素，而不是p aragraphs，于是他们自然就对准你希望他们的方式，而不使用显示属性。

这是原始文件（无内联CSS）：

body {
  font-family: Georgia;
  color: rgb(22, 31, 53);
}

.links {
  color: rgb(22, 31, 53);
}

.links .link-text {
  color: rgb(22, 31, 53);
}

<!DOCTYPE html>
<html>

<body>
  <img src="https://static1.squarespace.com/static/5755c2b9356fb0c7e2943cf6/t/58800e158419c2ec7abbbd80/1484787227067/TheTest_banner_r2.png?format=2500w" width="571" height="168">

  <div class="links" style="font-size: 15px;">
    <a href="#"><span class="link-text">Test</span></a><span> | </span>
    <a href="#"><span class="link-text">Test</span></a><span> | </span>
    <a href="#"><span class="link-text">Test</span></a><span> | </span>
    <a href="#"><span class="link-text">Test</span></a><span> | </span>
    <a href="#"><span class="link-text">Test</span></a><span> | </span>
    <a href="#"><span class="link-text">Test</span></a>
  </div>

  <p style="font-size: 11px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br/>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>
</body>

</html>

这是一个内联版本，我使用Office365 Outlook客户端进行了测试：

body {
  font-family: Georgia;
  color: rgb(22, 31, 53);
}

.links {
  color: rgb(22, 31, 53);
}

.links .link-text {
  color: rgb(22, 31, 53);
}

<!DOCTYPE html>
<html>

<body style="font-family: Georgia;color: rgb(22, 31, 53);">
  <img src="https://static1.squarespace.com/static/5755c2b9356fb0c7e2943cf6/t/58800e158419c2ec7abbbd80/1484787227067/TheTest_banner_r2.png?format=2500w" width="571" height="168">

  <div class="links" style="font-size: 15px;color: rgb(22, 31, 53);">
    <a href="#"><span class="link-text" style="color: rgb(22, 31, 53);">Test</span></a><span> | </span>
    <a href="#"><span class="link-text" style="color: rgb(22, 31, 53);">Test</span></a><span> | </span>
    <a href="#"><span class="link-text" style="color: rgb(22, 31, 53);">Test</span></a><span> | </span>
    <a href="#"><span class="link-text" style="color: rgb(22, 31, 53);">Test</span></a><span> | </span>
    <a href="#"><span class="link-text" style="color: rgb(22, 31, 53);">Test</span></a><span> | </span>
    <a href="#"><span class="link-text" style="color: rgb(22, 31, 53);">Test</span></a>
  </div>

  <p style="font-size: 11px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>

</body>

</html>

注意：更改颜色的CSS是多余的。我保留了新元素的原样，以防您以后想要将其更改为实际有意义的东西。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。