问题
I am designing an e-newsletter with an effect like this per my client's instructions.
I know there is no way to use javascript in an email, so I've tried to make it in a stupid way, using overflow:hidden and anchor tags. When I click the appropriate link, the hidden image will scroll up to the visible area. Here's my code:
<!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>
Concerning most of client won't support in div tag, so I've tired to use table to make it, actually, everything's work in browser, but the <a> tag's href will be replaced in email client from #tab_01 to http://mydomain/news.html#tab_01.
When I click it on email client, it opens a new browser window which is not at all what I want. Is it possible to be fixed?
Here's my sending email procedure:
- Upload whole website to server
- Open the page
- Select all and Copy
- Paste to compose windows, and send.
Have I done anything wrong? I've tested Gmail, Hotmail (outlook.com), Yahoo, Apple mail, Outlook 2011 for Mac.
回答1:
I think that isn't possible to you to achieve this goal.
Most email clients doesn't support style tag in head or body(especially gmail), also as it was previously mentioned - you can't use events or selectors in inline css. So it can't be done through :focus selector.
As a reference I can give you this link of css that is supported by most email clients(web-based and not)
回答2:
I've tested anchor links in email before and found them to have spotty support. From memory it was probably working fine in the Mac clients but failed miserably in either Gmail or Outlook.
There was a solution I remember seeing a while back that did exactly what you are trying to do, but worked only in Mac clients.
One alternate solution is to combine the anchor link with the webversion of your email. This way they will be taken to the same email (although in the browser now), and pointed at the desired anchor.
Otherwise if you are not willing to go to the browser, you'll have to avoid hiding the sections and just know where the anchor links are not supported, the reader will just have to scroll down.
回答3:
I was having issues with my own email and come up with this minimum working example, if you grab this example and test it with putsmail (https://putsmail.com/tests/) you'll notice that contrary to consensus on most of the internet gmail does indeed support the usage of content Anchors.
I've used the same principle on a more complex e-mail, and found out this is a bit finicky, so I chose to keep my anchor names without underlines and checked the email for valid html: it seems to work fine.
I know it's not a definitive answer for Ops question, but since it's a 7 year question leading to a incorrect conclusion I feel it would be more productive to leave this here.
<!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>
来源：https://stackoverflow.com/questions/15895550/email-with-anchor-link-doesnt-work-on-gmail-and-indexed-my-link