我有一个可以正常使用的现有 Gmail 签名。它是在一年多前保存和实现的。我尝试复制/粘贴相同的签名，但即使它也坏了。这几乎就像 Gmail 改变了他们允许 HTML 签名的方式。
我想问问有没有人给我一些建议。我尝试将所有类更改为内联样式，但仍然没有成功。需要明确的是，它在 Logo 图像之后换行，但仅在其发送之后。
当我在作曲和在草稿中时，签名很好。只有发送后，它才会在 Logo 后换行。
有什么建议吗？任何人都可以提供有关格式化此 HTML 以用作 Gmail 签名的任何指导吗？
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img { margin: 0; padding: 0; outline: none; border: none; }
h1, h2, div, a { font-family: Tahoma, Sans-Serif; }
h1, h2 { margin: 0 0 0 0; font-weight: 500; }
a, a:hover { color: #000; text-decoration: none; }
h1 { font-size: 16px; }
h2 { font-size: 14px; }
.column { display: inline-block; }
.column:first-of-type {
margin-right: 5px;
padding-right: 5px;
border-right: 1px solid #343a40;
}
img.logo {
width: 55px;
height: 55px;
}
.contact { margin: 0 0 0 0; font-weight: 500; }
.contact > a:first-of-type {
display: inline-block;
font-size: 14px;
color: #777;
margin-right: 25px;
padding-top: 3px;
}
.social-icons { float: right; }
.social-icons img {
width: 18px;
height: 18px;
margin: 4px 0 0 5px;
line-height: 0;
}
</style>
</head>
<body>
<section class="email-signature-container">
<div class="column">
<img class="logo" src="https://i.imgur.com/x8NDcYM.png" alt="SISYN Networking" />
</div>
<div class="column">
<h1>Dan Lindsey</h1>
<h2>Full Stack Engineer, <a target="_blank" href="http://luxdig.com">LuxDigital</a></h2>
<div class="contact">
<a href="tel:336-355-5575">336-355-5575</a>
<div class="social-icons">
<a target="_blank" href="https://linkedin.com/in/mdlindsey"><img src="https://i.imgur.com/tkL1tNk.png" alt="LinkedIn" /></a>
<a target="_blank" href="https://stackoverflow.com/users/9468754/lux"><img src="https://i.imgur.com/0luxbot.png" alt="StackOverflow" /></a>
<a target="_blank" href="https://github.com/sisyn"><img src="https://i.imgur.com/pBv6GHr.png" alt="GitHub" /></a>
<!--
<a target="_blank" href="Skype:336-355-5575"><img src="https://i.imgur.com/83Jil5D.png" alt="Skype" /></a>
<a target="_blank" href="https://fb.com/dan.sisyn"><img src="https://i.imgur.com/LU362Re.png" alt="Facebook" /></a>
<a target="_blank" href="#"><img src="twitter.png" alt="Twitter" class="social-icon" /></a>
<a href="#"><img src="youtube.png" alt="YouTube" class="social-icon" /></a>
<a href="#"><img src="google.png" alt="Google+" class="social-icon" /></a>
-->
</div>
</div>
</div>
</section>
</body>
</html>最佳答案
我看到您缺少显示 block 、图像边框，并且您正在使用 div。我已经为图像和边框添加了显示 block 。我还在社交媒体图标周围放了一张 table 。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img { margin: 0; padding: 0; outline: none; border: none; }
h1, h2, div, a { font-family: Tahoma, Sans-Serif; }
h1, h2 { margin: 0 0 0 0; font-weight: 500; }
a, a:hover { color: #000; text-decoration: none; }
h1 { font-size: 16px; }
h2 { font-size: 14px; }
.column { display: inline-block; }
.column:first-of-type {
margin-right: 5px;
padding-right: 5px;
border-right: 1px solid #343a40;
}
img.logo {
width: 55px;
height: 55px;
}
.contact { margin: 0 0 0 0; font-weight: 500; }
.contact > a:first-of-type {
display: inline-block;
font-size: 14px;
color: #777;
margin-right: 25px;
padding-top: 3px;
}
.social-icons { float: right; }
.social-icons img {
width: 18px;
height: 18px;
margin: 4px 0 0 5px;
line-height: 0;
}
</style>
</head>
<body>
<section class="email-signature-container">
<div class="column">
<img class="logo" src="https://i.imgur.com/x8NDcYM.png" alt="SISYN Networking" style="display: block;border:0px;" />
</div>
<div class="column">
<h1>Dan Lindsey</h1>
<h2>Full Stack Engineer, <a target="_blank" href="http://luxdig.com">LuxDigital</a></h2>
<div class="contact">
<a href="tel:336-355-5575">336-355-5575</a>
<div class="social-icons">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><a target="_blank" href="https://linkedin.com/in/mdlindsey"><img src="https://i.imgur.com/tkL1tNk.png" alt="LinkedIn" style="display: block;border:0px;" /></a></td>
<td><a target="_blank" href="https://stackoverflow.com/users/9468754/lux"><img src="https://i.imgur.com/0luxbot.png" alt="StackOverflow" style="display: block;border:0px;" /></a></td>
<td><a target="_blank" href="https://github.com/sisyn"><img src="https://i.imgur.com/pBv6GHr.png" alt="GitHub" style="display: block;border:0px;" /></a></td>
</tr>
</tbody>
</table>
<!--
<a target="_blank" href="Skype:336-355-5575"><img src="https://i.imgur.com/83Jil5D.png" alt="Skype" /></a>
<a target="_blank" href="https://fb.com/dan.sisyn"><img src="https://i.imgur.com/LU362Re.png" alt="Facebook" /></a>
<a target="_blank" href="#"><img src="twitter.png" alt="Twitter" class="social-icon" /></a>
<a href="#"><img src="youtube.png" alt="YouTube" class="social-icon" /></a>
<a href="#"><img src="google.png" alt="Google+" class="social-icon" /></a>
-->
</div>
</div>
</div>
</section>
</body>
</html>让我知道这是否适合你(我想它会)
关于html - 为 Gmail 签名格式化 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49762412/