填充基于边框的按钮
此技术使用基于边框和基于填充的按钮的组合,使用填充和至少实心 1px 边框设置链接样式。需要将背景颜色应用于而不是在此实例中,因为 Outlook 确实识别标记上的水平填充(因为它不是块级别标记)。
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#0095FF"><a href="https://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #0095FF; display: inline-block;">Stack Overflow</a></td>
</tr>
</table>
</td>
</tr>
</table>
https://i.stack.imgur.com/mAB7b.jpg
填充+基于边框的按钮的缺点是它将 <td>
和 <a>
标签之间的样式分开,因此可能难以维护。但只使用一个按钮,不需要特定尺寸,并且可以支持背景图像。