10

应用于 Outlook 中的链接的 CSS 不起作用

HTML：

<tr>
<a href="http://www.google.com" style="color:#FFF;height:40px;width:475px;display:block;"><td style="background-color:#000;height:40px;width:475px;">Click Me</td></a>
</tr>

它只显示“点击我”文本的链接而不是全部

注意：它应该显示所有 td 的链接，即宽度：475 和高度：40

请帮我

谢谢

4

7 回答 7

13

您可以使用 Outlook 特定的 HTML 来解决此问题

<div><!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" stroke="f" fillcolor="#556270">
<w:anchorlock/>
<center>
<![endif]-->
 <a href="http://stackoverflow.com" style="background-color:#556270;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Show me the button!</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]--></div>

另请参阅http://buttons.cm/以创建“防弹”电子邮件按钮 :)

于 2013-12-18T09:49:04.077 回答
4

尝试

<tr>
  <td style="background-color:#000;height:40px;width:475px;">
     <a href="http://www.google.com" style="color:#FFF;height:40px;width:475px;display:block;">Click Me</a>
  </td>
</tr>
于 2013-06-18T13:31:11.367 回答
2

我也有这个问题，所以我发现了这个。只需使用具有相同背景颜色的边框样式，以便您的整个锚链接可以点击。

<a href="http://www.google.com" style="background-color:#000;height:40px;width:475px; border:1px solid #000; color:#FFF;height:40px;width:475px;display:block;">Click Me</a>
于 2015-05-28T06:45:28.910 回答
1

明显的问题是您的链接应该在表格单元格中：

<table>
  <tr>
    <td style="background-color:#000;">
       <a href="http://www.google.com" style="color:#FFF;height:40px;width:475px;display:block;">Click Me</a>
    </td>
  </tr>
</table>

我还会查看 Microsoft 的创建 Outlook CSS 和 HTML 支持的指南，因为有很多问题：http: //msdn.microsoft.com/en-us/library/office/aa338201(v=office.12)。 .aspx _ 一般来说，避免使用块元素和浮动以支持表格布局。Outlook 电子邮件也仅支持 CSS1 规范。

于 2013-06-18T13:34:51.380 回答
1

您的意思是应该将样式应用于所有 td 吗？

好吧，如果是的话，您所做的将不起作用，您所做的称为内联 css 样式，该样式仅适用于该特定元素。

如果您希望它适用于所有 td，那么您必须拥有所谓的内部 css 样式：

<html>
<head>
<style>
td{
//your code here
}
</style>
</head>
<body>
//your code here
</body>
</html>

顺便说一句，您的代码嵌套不正确，

你有一个开始的'a'标签，然后是一个开始的'td'标签，然后关闭'a'标签，然后关闭'td'标签......

您必须将其设置为：

<td><a></a></td> 或者 <a><td></td></a>

尝试：

<tr>
  <td style="background-color:#000;height:40px;width:475px;">
     <a href="http://www.google.com" style="color:#FFF;height:40px;width:475px;display:block;">Click Me</a>
  </td>
</tr>
于 2013-06-18T13:31:07.523 回答
0

使用它来消除 Outlook 上的额外间距问题

<tr>
  <a href="http://www.google.com" style="font-size:0;display:block;">
    <td style="background-color:#000;height:50px;width:400x;">Click here</td>
    </a>
</tr>

于 2021-11-10T06:52:04.247 回答
0

正如 ProfileTwist 在评论中指出的那样，层次结构应该是：

  • <tr><td><a href=link>text</a></td></tr>

我看到这是一篇旧帖子，但与其他答案相反，其意图可能是使表格变为白色（FFF）并将文本变为黑色（000）。

于 2015-09-29T15:25:31.503 回答