Question

应用于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>

它只显示“Click Me”文本的链接，而不是所有

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

请帮帮我

由于

Answer 1

您可以使用特定于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/创建“防弹”电子邮件按钮：）

Answer 2

尝试

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

Answer 3

你的意思是该风格应该应用于所有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>

Answer 4

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

<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规范。

Answer 5

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

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

Answer 6

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

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

我认为这是一个旧帖子，但与其他答案相反，意图可能是使表格为白色（FFF），文字为黑色（000）。

CSS不适用于Outlook邮件中的锚标记

6 个答案: