Outlook和Windows中的链接元素损坏

Question

我创建了一个电子邮件模板，其中包含一个充当按钮的链接。但是我的风格是什么，所有这些都被删除了。我已将链接放入表包装程序中，此问题已解决，但问题是，只有在与常规链接样式不同的文本处，链接才可单击。

当我以以下样式使用代码

<div class="link-wrapper">
    <a href="#" title="Title text" class="button-link" style="text-decoration: none;border-radius: 2px;background-color: #4169e1;text-align: center;padding: 10px 0px;border: 1px solid #4169e1;text-decoration: none;color: #fff;font-size: 13px;">Click Here</a>
</div>

我在Outlook和电子邮件中看到一个断开的链接，如屏幕快照

但是当我使用表格包装器并将链接放置在表格单元格中时，问题已解决，但问题是链接仅在具有不同于常规链接样式的文本的位置才可单击。

 <table cellspacing="0" cellpadding="0" class="my-block" id="button" align="center">
    <tr>
        <td class="button-wrapper">
            <a href="#" title="Title text" class="button-link" style="text-decoration: none;">Click Here</a>
        </td>
    </tr>
</table>

Answer 1

<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="v-text-anchor:middle;width:150px;height:40px;text-decoration: none;border-radius: 2px;text-align: center;padding: 10px 0px;border: 1px solid #4169e1;text-decoration: none;color: #fff;font-size: 13px;" fillcolor="#4169e1" stroke="false">
	<w:anchorlock/>
	<v:textbox inset="0,0,0,0">
		<center style="v-text-anchor:middle;text-decoration: none;text-decoration: none;color:#ffffff;font-size: 13px;">Click Here</center>
	</v:textbox>
</v:rect>
<![endif]-->
<!--[if !mso]><!-->
<div class="link-wrapper">
    <a href="#" title="Title text" class="button-link" style="text-decoration: none;border-radius: 2px;background-color: #4169e1;text-align: center;padding: 10px 0px;border: 1px solid #4169e1;text-decoration: none;color: #fff;font-size: 13px;">Click Here</a>
</div>
<!--<![endif]-->

添加了VML脚本以支持Outlook

Answer 2

Give this piece of code a go. It will work across all email clients the same. If you change border radius, it will only work on supported email clients.

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
        <tr>
          <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 0px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 0px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td>
        </tr>
      </table>

Hope this is what you were after.