3

我正在按照客户的指示设计具有类似效果的电子通讯。

我知道没有办法在电子邮件中使用 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_01to http://mydomain/news.html#tab_01。

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

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

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

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

4

3 回答 3

0

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

我记得有一个解决方案，我记得不久前看到的正是你想要做的，但只适用于 Mac 客户端。

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

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

于 2013-04-09T17:14:15.393 回答
0

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

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

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

于 2013-04-09T08:06:10.713 回答
0

我自己的电子邮件有问题，并提出了这个最低限度的工作示例，如果你抓住这个例子并用 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>
于 2020-02-25T19:34:05.783 回答