时间戳

首页 > 解决方案 > HTML 电子邮件签名

html - HTML 电子邮件签名

问题描述

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

我已经设法让它看起来像我想要的那样，但是与 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

标签： htmlcssoutlook

解决方案

好吧，看来 Outlook 不喜欢更改显示属性。我稍微改变了你的代码，所以它使用span元素而不是段落，所以它们自然地按照你想要的方式对齐，而不使用 display 属性。

这是原始的（没有内联的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 更改颜色是多余的。我将它保留为使用新元素，以防您以后想将它们更改为真正有意义的东西。

推荐阅读