我正在尝试创建一个带有文本“立即确认您的电子邮件”的按钮,它将重定向到谷歌网站。我能够把一切都做对,但宽度似乎是一个问题,因为我正在一个版本的 Outlook 上进行测试,它工作得很好,但如果在其他版本上进行相同的测试,则框中的文本前后似乎有额外的间距。
我尝试将边距和填充设置为零,但问题仍然没有解决。
我想要零填充,文本“confirm”之前和文本“now”之后不应该有空格
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.google.com" style="height:50px;v-text-anchor:middle;width:260px;" arcsize="12%" stroke="f" fillcolor="#686262">
<w:anchorlock/>
<center>
<span style="font-family:sans-serif;font-size:13px;font-weight:bold;color:#ffffff;line-height:50px;margin:0;padding:0;">Confirm your email now</span>
</center>
</v:roundrect>
<![endif]>
<!--[if !mso]><!-->
<a href="http://www.google.com" style="background-color:#686262;border-radius:6px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:200px; margin: 0; padding: 0;">Confirm your email now</a>
<!--<![endif]-->
</div>
我强烈建议使用专门为电子邮件兼容性设计的框架。
一些著名的框架包括 Mailjet 的 MJML 和较新的框架 Maizle(基于 Twilwind 类),这些框架有助于确保您的电子邮件在大多数电子邮件客户端上正确呈现。