如何使可点击为链接(没有Javascript)[英]How to Make a Clickable As a Link (Without Javascript) 本文翻译自 TrapezeArtist 查看原文 2015-09-02 11151 html/

I am writing some code for sending HTML e-mails. Due to the non-standard nature of e-mail clients, I am restricted to some pretty antediluvian code (no Javascript, no divs, no CSS shortcuts, etc.)

我正在写一些发送HTML电子邮件的代码。由于电子邮件客户机的非标准特性，我只能使用一些非常陈旧的代码(没有Javascript、没有div、没有CSS快捷方式等等)。

The call-to-action buttons are TDs but so far I haven't been able to make the whole button clickable; just the text in the middle.

调用-动作按钮是TDs，但是到目前为止我还不能让整个按钮可点击;只有中间的文字。

The code is something like

代码是这样的。

<table width="100%" border="0" cellpadding="0" cellspacing="20">
            <tr>
            <td align="center" valign="middle" width="33%" style="background-color:#6483c1; border:1px solid #44619a; border-radius:2px; padding-top:20px; padding-right:10px; padding-bottom:20px; padding-left:10px;">
            <a href="http://littlehotels.co.uk/travelinsurance.php" target="_blank" style="color:#FFFFFF; text-decoration:none;"><font size="3" face="Arial, Helvetica, sans-serif" color="#ffffff"><b>Travel Insurance</b></font></a>
            </td>

I have already tried adding display:block to the td style, but that didn't work.

我已经尝试过将display:block添加到td风格中，但这并不奏效。

Am I trying to do the impossible?

我在做不可能的事吗?

3 个解决方案

#1

Make the anchor a block level element and move the padding from the table cell to the anchor:

使锚点成为块级元素，并将填充从表单元格移动到锚点:

<table width="100%" border="0" cellpadding="0" cellspacing="20">
  <tr>
    <td align="center" valign="middle" width="33%" style="background-color:#6483c1; border:1px solid #44619a; border-radius:2px;">
      <a href="http://littlehotels.co.uk/travelinsurance.php" target="_blank" style="padding:20px 10px;display:block;color:#FFFFFF; text-decoration:none;"><font size="3" face="Arial, Helvetica, sans-serif" color="#ffffff"><b>Travel Insurance</b></font></a>
    </td>
  </tr>
</table>

#2

You cannot make a <td> clickable without JS
Enlarge the inner <a> size instead - to cover the needed area,
setting it's display to block might help.

如果不使用JS放大内部的大小，就不能让可点击——为了覆盖所需的区域，将其显示为block可能会有帮助。

#3

There is a way, it is not precisely what you are asking for, but should give you want you want - even in Outlook! You were on the right track, but the CSS stylings should be on the a tag instead. The best part is that there is a free online tool that can create the code for you.

有一种方法，它不是你想要的，而是应该给你想要的——即使是在Outlook中!你在正确的轨道上，但是CSS样式应该在标签上。最好的部分是有一个免费的在线工具可以为您创建代码。

Go to buttons.cm and it will create the html and VML needed to give you a fully clickable button in HTML/CSS and not just as an image.

去按钮。它将创建html和VML，以在html /CSS中提供完全可点击的按钮，而不仅仅是图像。

Added code output from buttons.cm as reference in case it ever gets taken down:

从按钮添加代码输出。cm作为参考，以防被取下来:

<table width="100%" border="0" cellpadding="0" cellspacing="20">
            <tr>
            <td align="center" valign="middle" width="33%"><div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://littlehotels.co.uk/travelinsurance.php" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="5%" strokecolor="#44619a" fillcolor="#6483c1">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Travel Insurance</center>
  </v:roundrect>
<![endif]--><a href="http://littlehotels.co.uk/travelinsurance.php"
style="background-color:#6483c1;border:1px solid #44619a;border-radius:2px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Travel Insurance</a></div>
            </td>
            </tr>
            </table>

#1