Question

我根据客户的指示设计了一个效果为like this的电子通讯。

我知道在电子邮件中无法使用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标签，所以我已经厌倦了使用表来实现它，实际上，一切都在浏览器中工作，但<a>标签的href将被替换在电子邮件客户端中，从#tab_01到http://mydomain/news.html#tab_01。

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

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

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

我做错了什么吗？我测试了Gmail，Hotmail（outlook.com），Yahoo，Apple邮件，Outlook 2011 for Mac。

Answer 1

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

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

作为参考，我可以为您提供css that is supported by most email clients（基于网络而不是）

的链接

Answer 2

我之前在电子邮件中测试了锚链接，发现它们有不稳定的支持。从内存来看，它可能在Mac客户端运行良好，但在Gmail或Outlook中都失败了。

有一个解决方案，我记得有一段时间看到了你正在尝试做的事情，但只在Mac客户端工作。

另一种解决方案是将锚链接与电子邮件的webversion结合起来。通过这种方式，他们将被带到同一封电子邮件中（尽管现在在浏览器中），并指向所需的锚点。

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

Answer 3

我在自己的电子邮件中遇到了问题，并提出了这个最小的工作示例，如果您抓住这个示例并使用putsmail（https://putsmail.com/tests/）进行测试，您会发现这与大多数互联网上的共识背道而驰gmail确实支持内容锚点的使用。

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

我知道这不是Ops问题的明确答案，但是由于这是7年的问题，导致得出错误的结论，因此我认为将其留在此处会更有效率。

mkdir -p usr/local/var/mongodb/data/db

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

3 个答案: