我正在设计一个电子通讯的效果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。
当我点击它在电子邮件客户端，它打开了一个新的浏览器窗口，这是不是在所有我想要的。有可能被修复吗？
以下是我发送电子邮件的步骤：
1.将整个网站上传到服务器
1.打开页面
1.全选并复制
1.贴上以撰写 windows ，然后传送。
我做错了什么吗？我测试过Gmail，Hotmail（outlook.com），雅虎，苹果邮件，Outlook 2011 for Mac。
3条答案
按热度按时间hof1towb1#
我想，要你达到这个目的是不可能的。
大多数邮件客户端不支持在head或body中使用style标签（尤其是gmail），正如前面提到的--你不能在内联css中使用事件或选择器，所以不能通过：focus selector来实现。
作为参考，我可以给予你这个css that is supported by most email clients的链接（基于网络的和不）
v1l68za42#
我以前测试过电子邮件中的锚链接，发现它们的支持参差不齐。从记忆中看，它可能在Mac客户端运行良好，但在Gmail或Outlook中失败得很惨。
我记得不久前看到过一个解决方案，它确实做了你想做的事情，但只适用于Mac客户端。
另一种解决方案是将锚链接与电子邮件的网页版本结合起来，这样它们会被带到同一封电子邮件（虽然现在是在浏览器中），并指向所需的锚点。
否则，如果你不愿意去浏览器，你将不得不避免隐藏的部分，只是知道锚链接不支持，读者将只需要向下滚动。
j2cgzkjk3#
我对我自己的电子邮件有问题，并提出了这个最低限度的工作示例，如果你抓住这个示例，并用putsmail（https://putsmail.com/tests/）测试它，你会注意到，与大多数互联网上的共识相反，gmail确实支持使用内容锚点。
我在一封更复杂的电子邮件中使用了同样的原则，发现这有点挑剔，所以我选择保留锚名，不加下划线，并检查电子邮件的有效html：它似乎工作得很好。
我知道这不是一个明确的答案，但由于这是一个7年的问题，导致一个不正确的结论，我觉得这将是更有成效的离开这里。