4

在为 Outlook 创建 html 电子邮件时，我偶然发现了一个我无法解决的小问题。

下面是一个 html 表格的屏幕截图。我需要使整个区域可点击，而不仅仅是文本。当我<a href="#">使用<td>or<table>时，它在浏览器中有效，但在 Outlook 中无效。

在此处输入图像描述

这是代码：

<table border="0" cellpadding="0" cellspacing="0" style="border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;background-color: #2FBA45;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
    <tbody>
        <tr>
            <td align="center" valign="middle" style="font-family: Arial;font-size: 22px;padding: 15px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                <a href="#" title="Yes please, send me a quote." target="_self" style="font-weight: bold;letter-spacing: -0.5px;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;word-wrap: break-word !important; display:block; width:100%; height:100%">Yes please, send me a quote.</a>
            </td>
        </tr>
    </tbody>
</table>
4

4 回答 4

1

我知道这是一个老问题，但我一直在寻找这个问题的答案（Outlook 中的可点击整个按钮）并偶然发现了以下解决方案：

<table border="0" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td align="center" valign="middle" >

<!-- start of Outlook compatible button generated by http://buttons.cm/ -->
<div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://yoururlhere.com/" style="height:52px;v-text-anchor:middle;width:330px;" arcsize="10%" stroke="f" fillcolor="#2fba45">
    <w:anchorlock/>
    <center>
  <![endif]-->
      <a href="http://yoururlhere.com/"
style="background-color:#2fba45;border-radius:5px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:52px;text-align:center;text-decoration:none;width:330px;-webkit-text-size-adjust:none;">Yes please, send me a quote.</a>
  <!--[if mso]>
    </center>
  </v:roundrect>
<![endif]--></div>
<!-- end of Outlook compatible button generated by http://buttons.cm/ -->

            </td>
        </tr>
    </tbody>
</table>

注意我没有测试上面的代码。

其他答案确实链接到了campaignmonitor网站，但没有链接到提供解决方案的这个链接。

Campaignmonitor 上的那篇博客文章提到，他们已经创建了一个特定的网站来生成与 Outlook 兼容的可点击按钮 - http://buttons.cm基于 Stig M（推特上的@stigm）创建的解决方案。

我不为活动监视器工作。

希望对某人有所帮助。

于 2013-11-29T07:20:03.227 回答
0

Try removing the target="_self". As Outlook is a email client, it probably doesn't recognize it and may be causing the issue.

On a side note, If you are using anchor links within your email (linking elsewhere on the same page), this is not fully supported in all email browsers. Here is the support chart

于 2013-07-24T15:46:47.953 回答
0

您可以尝试使用onClick, <td onClick="go to anchor">。在内联样式中，您应该添加cursor: pointer，以便将光标更改为“悬停链接”指针。

于 2013-07-24T11:39:54.083 回答
0

尝试这个

http://jsfiddle.net/KrRzP/ 

<table border="0" cellpadding="0" cellspacing="0"   style="border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;background-color: #2FBA45;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; cursor:pointer;">
    <tbody>                 
        <tr>
            <td align="center" valign="middle"  style="font-family: Arial;font-size: 22px;padding: 15px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                <a  href="http://www.example.org" title="Yes please, send me a quote."  target="_self" style="font-weight: bold;letter-spacing: -0.5px;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;word-wrap: break-word !important; display:block; width:100%; height:100%">Yes please, send me a quote.</a>
            </td>  
        </tr>
    </tbody>
</table>
于 2013-07-24T11:15:41.227 回答