我正在制作一个相当简单的电子邮件签名。我之前没有这样做过,我正在尝试构建能够在尽可能多的电子邮件客户端中正确显示的内容。我目前已经意识到的两个问题是:某些图像没有显示,而Thunderbird中的用户也报告了一些显示问题。如果看起来很明显,我会非常感谢您的投入!带注释的代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
</head>
<body style="background-color:white;background-image:none;background-
repeat:repeat;background-position:top left;background-attachment:scroll;font-
family:'ARIAL', sans-serif;font-size:12px;line-height:normal;" >
<div style="padding-top:1em;padding-bottom:4em;padding-right:0;padding-
left:0;" >
<div style="width:600px;margin-top:0;margin-bottom:0;margin-
right:auto;margin-left:auto;" >
<!-- Personal information -->
<div style="display:table;" >
<!-- Name -->
<h1 style="color:#34CF42;margin-top:0;margin-bottom:0;margin-
right:0;margin-left:0;font-size:14px;font-weight:700;padding-
top:20px;" >Joe blogs</h1>
<!-- End Name -->
<!-- Role -->
<h2 style="color:#9B9B9B;margin-top:0;margin-bottom:0;margin-
right:0;margin-left:0;font-size:12px;font-weight:500; padding-top:
3px;" >Job title</h2>
<!-- End Role -->
<!-- Personal - Phone numbers and links-->
<table border="0" cellspacing="0" cellpadding="0">
<tr style="padding-top:3px;padding-bottom:0px;padding-
right:0px;padding-left:0px;margin-top:0;margin-
bottom:0;margin-right:0;margin-left:0;">
<td nowrap>
<a href="tel:#" style="font-size:20px; color:#1F80BA;
display:table-cell;vertical-align:top; text-
decoration:none !important;" > <h3 style="white-
space: nowrap;color:#FF00FF;margin-top:0;margin-
bottom:0;margin-right:0;margin-left:0;font-weight:500;
font-size:12px; text-decoration:none !important;
padding-top: 5px;padding-right:5px;">+44­ 123 456
7890 |</h3></a>
</td>
<td nowrap>
<a href="tel:#" style="font-size:20px; color:#1F80BA;
display:table-cell;vertical-align:top; text-
decoration:none !important;" > <h3 style="white-
space: nowrap;color:#FF5521;margin-top:0;margin-
bottom:0;margin-right:0;margin-left:0;font-weight:500;
font-size:12px; text-decoration:none !important;
padding-top: 5px;padding-right:5px;">+44­
78910111212 </h3></a>
</td>
</tr>
</table>
<!--End Personal - Phone numbers and links -->
<!-- Spacer -->
<br>
<!-- End Spacer -->
</div>
<!-- End Personal information -->
<!-- information -->
<table>
<tr>
<!-- logo -->
<td width="60" style="padding: 5px 10px 0px 0px; vertical-
align:top;">
<a href="https://placeholder.com"><img
src="http://via.placeholder.com/60x60"></a>
</td>
<!-- end logo -->
<!-- left hand info -->
<td>
<table>
<tr>
<td>
<h1 style="color:#1f354a;margin-top:0;margin-
bottom:0;margin-right:0;margin-left:0;font-
size:12px;font-weight:700;" >Insert strapline
here</h1>
<td>
</tr>
<tr>
<td>
<h2 style="color:#9B9B9B;margin-
top:3px;margin-bottom:0;margin-
right:0;margin-left:0;font-
size:12px;font-weight:500;" >Insert
another statement here</h2>
<td>
</tr>
<!-- social icons -->
<tr>
<td>
<table>
<tr>
<td>
<a
href="https://placeholder.com"><img
src="http://via.placeholder.com/14x14"></a>
</td>
<td>
<a
href="https://placeholder.com"><img
src="http://via.placeholder.com/14x14"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end social icons -->
</td>
</tr>
</table>
<!-- End information -->
<!--Spacer-->
<br>
<!--End Spacer-->
<!--Small print-->
<div style="color:#898989;display:table; font-
size:10px" >
Sed ut perspiciatis unde omnis iste natus error
sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo.
</div>
<!--End small print-->
</div>
</div>
</body>
</html>
&#13;