问题描述
我目前正在为Outlook开发HTML签名。 我正在努力使其格式正确,并使它在多个设备上看起来相同。
当我在浏览器上查看html时,它的外观完全符合我的设想。我希望应该代表徽标的左行宽度完全相同。我通过使用text-justify:distribute来做到这一点。 Outlook古老的渲染引擎可能不支持该功能。有谁知道实现此效果的受支持方法?我尝试过使用字母间距:xx,但是在设备之间差异太大。
这应该是签名的样子:
<html>
<body>
<table width="380" cellspacing="0" cellpadding="0" style="margin-top:0px; margin-bottom:0px; font-family:arial; color: #231f20; vertical-align:top"">
<tr>
<td style="FONT-SIZE: 14pt; border-right:#231f20 1.5px solid">
<span style="white-space:Nowrap; font-weight:bold; display: inline-block; text-justify: distribute; text-align-last:justify; letter-spacing:2.7px;">
<span style="display:block; margin-bottom:4px;">ABCDEF<br></span>
<span style="display:block; margin-bottom:4px;">GHJKL<br></span>
<span style="display:block; ">MnopQR</span>
</span>
</td>
<td
style="font-size:7.5pt; line-height:6pt; vertical-align:bottom; padding-bottom:3px; padding-left:17px">
<span style="display:block; white-space:Nowrap; margin-bottom:0px;">Lorem ipsum dolor sit amet,consetetur sadipscing</span>
<br>
<span style="display:block; white-space:Nowrap; margin-bottom:0px;">
Lorem ipsum dolor sit amet,consetetur</span>
<br>
<span style="display:block; white-space:Nowrap; margin-bottom:0px;">Tel: <a href=""
style="text-decoration:none!important; color:#000000">+01 234 56789</a> · <a href="mailto:example.com"
style="text-decoration:none!important; color:#000000">www.example.com</a></span>
<br>
<span><a href="http://example.com"
style="white-space:Nowrap; text-decoration:none !important; color:#000000; font-weight:bold;">www.example.com</a></span>
</td>
</tr>
</table>
</body>
</html>
This is what the signature looks like after importing to outlook:
解决方法
安德烈,欢迎您到Stack溢出,
对不起,您不走运。由于不支持该属性,因此无法在Outlook中实现。字母间距只有在您使用完整的像素值时才有效,即使这样,每个客户端的字母间距也会相差很大。
正如我讨厌说的那样:如果要跨客户端兼容,则需要使用图像。您可以使用大尺寸并缩小尺寸以获得良好的外观。