HTML Email Signatures

问题: I am trying to make an HTML email signature. I have managed to get it the way I would like it to look, but something strange seems to be happening when viewing the signa...

问题:

I am trying to make an HTML email signature.

I have managed to get it the way I would like it to look, but something strange seems to be happening when viewing the signature in the Outlook client compared to Outlook on the web, please see image below.

This is what it looks like when viewed on the web. Outlook On The Web

And this is what it looks like when viewed in the Outlook client.

enter image description here

Here is my 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>

Here is my 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


回答1:

Alright, it seems Outlook doesn't like the display property being changed. I switched your code a bit, so it uses span elements instead of paragraphs, so they naturally align the way you want them to, without using the display property.

Here's the original (without inlined 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>

And here's a inlined version, which I tested using Office365 Outlook client:

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>

Note: your CSS to change the color is redundant. I left it as is using the new elements, in case you wanted to change them later to actually meaningful things.


回答2:

Try this css

.links{
  display: flex;
  flex-direction: row;
  align-items: center;
}

Hope that helps

  • 发表于 2019-01-20 14:11
  • 阅读 ( 188 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除