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

krcsximq 于 2022-12-30 发布在其他

关注(0)|答案(8)|浏览(166)

应用于Outlook中链接的CSS不起作用
超文本：

<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
请帮帮我
谢啦，谢啦

css

来源：https://stackoverflow.com/questions/17170079/css-not-works-for-anchor-tag-in-outlook-mail

8条答案

按热度按时间

bjp0bcyl1#

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

赞(0）回复(0）举报 2022-12-30

c86crjj02#

试试看

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

赞(0）回复(0）举报 2022-12-30

sqxo8psd3#

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

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

赞(0）回复(0）举报 2022-12-30

dnph8jn44#

你的意思是样式应该应用于所有的td吗？
好吧，如果是的话，你所做的事情就不起作用了，你所做的事情被称为内联css样式，它只适用于那个特定的元素。
如果你想让它适用于所有的td，那么你必须有什么是所谓的内部css风格：

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

顺便说一句，你的代码嵌套不对
u有一个开始的"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>

赞(0）回复(0）举报 2022-12-30

shyt4zoc5#

显而易见的问题是，链接应该位于表格单元格中：

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

我也会检查微软的指南创建Outlook CSS和HTML支持，因为有很多陷阱：http://msdn.microsoft.com/en-us/library/office/aa338201(v=office.12).aspx。一般避免块元素和浮动有利于表格布局。此外Outlook电子邮件只支持CSS1规范。

赞(0）回复(0）举报 2022-12-30

2nbm6dog6#

如注解中的ProfileTwist所示，层次结构应为：

第一个月

我看到这是一个老职位，但相反的其他答案的意图可能是使表白色（FFF）和文本黑色（000）。

赞(0）回复(0）举报 2022-12-30

qlvxas9a7#

使用这为删除额外的间隔问题在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>

赞(0）回复(0）举报 2022-12-30

n3h0vuf28#

用span标签 Package 您的锚标签，并将样式添加到span而不是a标签。

<span style="color:#fff">
  <a href="#">
    Click Me
  </a>
</span>

赞(0）回复(0）举报 2022-12-30

我来回答

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

8条答案

相关问题

热门标签

最新问答