带有锚链接的电子邮件在 gmail 上不起作用，并将我的“#”链接编入索引？

Question

我设计的电子通讯与效果像这样按我的客户的指示。

我知道没有办法在电子邮件中使用 javascript，所以我试图以一种愚蠢的方式来制作它，使用overflow:hidden和锚标记。 当我单击相应的链接时，隐藏的图像将向上滚动到可见区域。 这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>demot</title>
<style type="text/css">
.OF {
    display:block;
    max-height: 100px;
    overflow: hidden;
    white-space:nowrap;
}
</style>
</head>

<body>
<!-- Save for Web Slices (News_Letter_artwork.jpg) -->
<table id="Table_01" width="595" height="434" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="5">
            <img src="images/News_Letter_artwork_01.jpg" width="595" height="155" alt=""></td>
    </tr>
    <tr style="display:block;">
        <td>
            <img src="images/News_Letter_artwork_02.jpg" width="50" height="37" alt=""></td>
        <td>
            <A href="#tab_01"><span><font><img src="images/News_Letter_artwork_03.jpg" width="118" height="37" alt=""></font></span></A></td>
        <td>
            <A href="#tab_02"><span><img src="images/News_Letter_artwork_04.jpg" width="118" height="37" alt=""></span></span></A></td>
        <td>
            <A href="#tab_03"><span><img src="images/News_Letter_artwork_05.jpg" width="121" height="37" alt=""></span></span></A></td>
        <td>
            <img src="images/News_Letter_artwork_06.jpg" width="188" height="37" alt=""></td>
    </tr>
    <tr style="display:block; max-width: 595px; max-height: 186px; overflow: hidden; white-space:nowrap;">
        <td colspan="5">
            <h2><a name="tab_01" id="tab_01"></a></h2><img src="images/News_Letter_artwork_07.jpg" width="595" height="186" alt=""><p>
            <h2><a name="tab_02" id="tab_02"></a></h2><img src="images/News_Letter_artwork_07b.jpg" width="595" height="186" alt=""><p>
            <h2><a name="tab_03" id="tab_03"></a></h2><img src="images/News_Letter_artwork_07c.jpg" width="595" height="186" alt=""><p>
        </td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="images/News_Letter_artwork_08.jpg" width="595" height="56" alt=""></td>
    </tr>
</table>
</body>
</html>

关于大多数客户端不支持 div 标签，所以我已经厌倦了使用 table 来制作它，实际上，一切都在浏览器中工作，但是<a>标签的href将在电子邮件客户端中从#tab_01为http://mydomain/news.html#tab_01 .

当我在电子邮件客户端上单击它时，它会打开一个新的浏览器窗口，这根本不是我想要的。 有没有可能被修复？

这是我的发送电子邮件程序：

将整个网站上传到服务器
打开页面
全选并复制
粘贴以组成窗口，然后发送。

我做错了什么吗？ 我已经测试了 Gmail、Hotmail (outlook.com)、Yahoo、Apple 邮件、Mac 版 Outlook 2011。

Answer 1

我认为你不可能实现这个目标。

大多数电子邮件客户端不支持头部或正文（尤其是 gmail）中的样式标记，正如前面提到的 - 您不能在内联 css 中使用事件或选择器。 所以它不能通过 :focus 选择器来完成。

作为参考，我可以为您提供大多数电子邮件客户端（基于网络和非基于网络）支持的css链接

Answer 2

我之前测试过电子邮件中的锚链接，发现它们的支持参差不齐。 根据记忆，它可能在 Mac 客户端中运行良好，但在 Gmail 或 Outlook 中却惨遭失败。

我记得有一个解决方案，我记得不久前看到的，它完全符合您的要求，但仅适用于 Mac 客户端。

一种替代解决方案是将锚链接与电子邮件的网络版本结合起来。 这样他们将被带到同一封电子邮件（尽管现在在浏览器中），并指向所需的锚点。

否则，如果您不愿意访问浏览器，则必须避免隐藏这些部分，并且只知道不支持锚链接的位置，读者只需向下滚动即可。

Answer 3

我在使用自己的电子邮件时遇到了问题，并提出了这个最低限度的工作示例，如果您抓住这个示例并使用 putsmail ( https://putsmail.com/tests/ ) 对其进行测试，您会注意到这与大多数人的共识相反互联网 gmail 确实支持使用内容锚点。

我在更复杂的电子邮件上使用了相同的原则，发现这有点挑剔，所以我选择保留没有下划线的锚点名称并检查电子邮件是否有有效的 html：它似乎工作正常。

我知道这不是 Ops 问题的明确答案，但由于这是一个 7 年的问题，导致错误的结论，我觉得把它留在这里会更有成效。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="pt-br">
<head>
<title>ANCHOR TEST</title>
<meta charset="utf-8">
</head>
<body>
<a href="#01" >ANCHOR 1</a><br/>
<a href="#test01" >ANCHOR 2</a><br/>
<a href="#test_01" >ANCHOR 3</a><br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>      
<a name="01" id="01" >destination 1</a><br/>
<a name="test01" >destination 2</a><br/>
<span name="test_01" >destination 3</span><br/>
</body>
</html>

带有锚链接的电子邮件在 gmail 上不起作用，并将我的“#”链接编入索引？

问题描述

3 个解决方案

解决方案1
0 2013-04-09 08:06:10

解决方案2
0 2013-04-09 17:14:15

解决方案3
0 2020-02-25 19:34:05

带有锚链接的电子邮件在 gmail 上不起作用，并将我的“#”链接编入索引？

问题描述

3 个解决方案

解决方案1 0 2013-04-09 08:06:10

解决方案2 0 2013-04-09 17:14:15

解决方案3 0 2020-02-25 19:34:05

解决方案1
0 2013-04-09 08:06:10

解决方案2
0 2013-04-09 17:14:15

解决方案3
0 2020-02-25 19:34:05