整体制作通过锚点标记点击

在为Outlook创建html电子邮件时，我偶然发现了一个我无法修复的小问题。整体制作通过锚点标记点击

下面是一张html表格的截图。我需要使整个区域可点击，而不仅仅是文本。当我将<a href="#">放在<td>或<table>的周围时，它可以在浏览器中使用，但不能在Outlook中使用。

enter image description here

下面是代码：

<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>

来源

2013-07-24 Java Student

看看这个链接查看HTML标准的电子邮件客户端支持http://www.campaignmonitor.com/css/ – AnaMaria

@AnaMaria我知道，但我问这个代码，如果可能 –

试试这个

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-24 11:15:41 falguni

它甚至没有工作的交替浏览器，无论如何，我改变我的代码，如跨度等获得相同的输出？ –

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

来源

2013-07-24 11:39:54 Pieter

仍然无法正常工作 –

尝试删除target="_self"。由于Outlook是一个电子邮件客户端，它可能不会识别它并可能导致此问题。

请注意，如果您在电子邮件中使用锚链接（在同一页面的其他地方链接），所有电子邮件浏览器都不支持此链接。这里是support chart

来源

2013-07-24 15:46:47 John

我知道这是一个老问题，但我一直在寻找的答案，这个问题（在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网站，但不是this link which provided the solution。

Campaignmonitor的博客文章提到他们基于Stig M（@stigm on twitter）创建的解决方案创建了一个specific website to generate outlook compatible clickable buttons - http://buttons.cm。

我不为campaignmonitor工作。

希望能帮助别人。

来源

2013-11-29 07:20:03

整体制作​​通过锚点标记点击

回答

相关问题

整体制作通过锚点标记点击