我正在开发电子邮件简报，它在我需要测试的所有电子邮件客户端(AOL、Hotmail、Yahoo、Gmail、Outlook、Lotus Notes、Thunderbird 等)中看起来都不错，iPhone 除外。即使是 iPad 看起来也不错，所以它不是 iOS 的东西。我使用了基于表格的布局，并使用 litmus.com 进行测试。
截图如下:
这是我的表结构。 (这是一个嵌套表格，只是时事通讯的一部分。)
请注意，间隙仅在一侧。
侧面的两个图像高度相同，并且都具有 <img> 中声明的宽度和高度标签。我以前处理过电子邮件通讯中的空白。添加display:block;并带走 <tr> 之间的物理空间的和<td>通常可以解决问题，但我试了又试，运气不好。
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Newsletter</title>
</head>
<body style="font-family: Helvetica, Arial, sans-serif;">
<table cellpadding="0" cellspacing="0" align="center" style="margin:0 auto; width:650px;" width="650">
<tr><td colspan="2"><p align="right" style="font-size: 12px; line-height:18px;"><forwardtoafriend>Forward to a Friend</forwardtoafriend></p></td></tr>
<tr><td>
<table cellpadding="0" cellspacing="0" style="margin: 0 auto; border-collapse:collapse;" align="center" width="650" bgcolor="#efe8d8">
<tr><td><img src="images/header.jpg" alt="Description" width="650" height="110" style="display:block;" /></td></tr>
<tr><td>
<table cellpadding="0" cellspacing="0" width="650">
<tr><td colspan="3"><img src="images/hotter.jpg" alt="Description" width="650" height="144" border="0" style="display:block;" /></td></tr>
<tr><td valign="top"><img src="images/letter-l.jpg" width="61" height="613" style="display:block;"></td><td width="495" height="613" bgcolor="#f7f4eb" style="height:613px;"><h3 style="margin:0 0 30px; font-family:Helvetica, Arial, sans-serif; color:#000; font-size:18px;">Greetings,</h3>
<p style="margin:10px 0px; font-family:Helvetica, Arial, sans-serif; color:#000; line-height:20px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis metus quam, lacinia vehicula tellus. Donec a elementum est. Fusce et sem nec diam aliquam rhoncus non non orci. Phasellus tortor eros, aliquam et ultrices vel, mollis et ante. Sed id lectus at mi massa nunc.</p>
<p style="margin:10px 0px; font-family:Helvetica, Arial, sans-serif; color:#000; line-height:20px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu urna sed nisl aliquet pretium. Nullam mattis cursus nisi ut porttitor. Suspendisse ut lectus elit, ut placerat neque. Aliquam orci lacus, dictum accumsan euismod a, imperdiet sit amet lorem. Maecenas vitae justo nisi, non convallis tortor. Class aptent taciti sociosqu ad litora torquent per conubia sed.</p>
<p style="margin:10px 0px; font-family:Helvetica, Arial, sans-serif; color:#000; line-height:20px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vestibulum pulvinar ullamcorper. Nulla varius pretium turpis vitae adipiscing. Proin suscipit, tortor interdum lobortis malesuada, quam arcu dictum sapien, in varius nulla quam a mi. Duis eget orci quis mi egestas sollicitudin. Vestibulum gravida odio et metus.</p>
<p style="margin:10px 0px; font-family:Helvetica, Arial, sans-serif; color:#000; line-height:20px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a erat nec est luctus consequat sed id erat. Duis odio sem, blandit sed malesuada eget, convallis commodo felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam vitae fermentum augue. Nam a fermentum enim. In diam turpis volutpat.</p>
<p style="margin:10px 0px; font-family:Helvetica, Arial, sans-serif; color:#000; line-height:20px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac orci sed massa interdum suscipit. Proin facilisis venenatis lacus, sed cursus sem hendrerit ac. Sed tristique, nisi a nullam.</p></td><td valign="top"><img src="images/letter-r.jpg" width="94" height="613" style="display:block;"></td></tr>
<tr><td colspan="3"><img src="images/letter-bottom.jpg" width="650" border="0" style="display:block;" /></td></tr>
</table>
</td></tr>
<tr><td><img src="images/star-rewards.jpg" alt="Description">
<table cellpadding="0" cellspacing="0" width="650">
<tr><td><a href="#"><img src="images/card-star.jpg" border="0"></a></td><td>
<a href="#"><img src="images/header-star.jpg" border="0"></a>
<p style="margin:10px 30px 10px 0; font-family:Helvetica, Arial, sans-serif; color:#636364; line-height:24px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie nulla vel lorem scelerisque hendrerit. Phasellus sed ullamcorper lorem. Phasellus molestie convallis aliquet. Proin justo magna, aliquam amet.</p></td></tr>
<tr><td><a href="#"><img src="images/card-sky.jpg" border="0"></a></td><td>
<a href="#"><img src="images/header-sky.jpg" border="0"></a>
<p style="margin:10px 30px 10px 0; font-family:Helvetica, Arial, sans-serif; color:#636364; line-height:24px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel est nec nibh imperdiet suscipit ornare porta enim. Aenean lobortis orci at ligula sollicitudin semper. Suspendisse potenti. Curabitur mollis tellus ut sem consequat placerat. Cras amet.</p></td></tr>
<tr><td><a href="#"><img src="images/card-wind.jpg" border="0"></a></td><td>
<a href="#"><img src="images/header-wind.jpg" border="0"></a>
<p style="margin:10px 30px 10px 0; font-family:Helvetica, Arial, sans-serif; color:#636364; line-height:24px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis quam vel orci pharetra tempus ut quis neque. Duis condimentum magna ut lorem vulputate et dapibus ipsum facilisis. Nullam rutrum rhoncus massa, ut viverra risus luctus eget. Fusce nullam.</p></td></tr>
<tr><td><a href="#"><img src="images/card-water.jpg" border="0"></a></td><td>
<a href="#"><img src="images/header-water.jpg" border="0"></a>
<p style="margin:10px 30px 10px 0; font-family:Helvetica, Arial, sans-serif; color:#636364; line-height:24px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum libero mauris, porttitor ac placerat blandit, sodales quis diam. Suspendisse at est ante. Integer et porta lacus. Ut egestas elementum metus.</p></td></tr>
<tr><td><a href="#"><img src="images/card-earth.jpg" border="0"></a></td><td>
<a href="#"><img src="images/header-earth.jpg" border="0"></a>
<p style="margin:10px 30px 10px 0; font-family:Helvetica, Arial, sans-serif; color:#636364; line-height:24px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent venenatis erat id nibh ultrices vehicula. Quisque interdum posuere ante at aliquam. Nullam sed lectus ut ipsum rutrum lacinia malesuada massa nunc.</p>
</td></tr>
<tr><td></td><td><p style="margin:10px 30px 10px 0; font-family:Helvetica, Arial, sans-serif; color:#636364; line-height:20px; font-size:12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet tincidunt ipsum eget ultricies. Etiam bibendum elementum mollis. Pellentesque eleifend sollicitudin tincidunt. Proin nulla felis, congue at nullam.</p></td>
</table>
</td></tr>
<tr><td colspan="3" style="padding:0;margin:0;line-height:0;"><img src="images/logo.jpg" alt="Description" /></td></tr><tr><td style="padding:0;margin:0;line-height:0;"><img style="padding:0;margin:0;line-height:0;" src="images/footer-l.jpg" /><a style="padding:0;margin:0;line-height:0;" href="#"><img style="padding:0;margin:0;line-height:0; border:none;" src="images/footer-url.jpg" alt="Description" /></a><img style="padding:0;margin:0;line-height:0;" src="images/footer-r.jpg" /></td></tr><tr><td style="padding:0;margin:0;line-height:0;"><img src="images/footer-bottom.jpg" /></td></tr><tr><td style="padding:0;margin:0;line-height:0;"><img src="images/follow.jpg" alt="Follow us on Twitter and Facebook!" /><a href="#"><img style="border:none;" src="images/twitter.jpg" alt="#" /></a><a href="#"><img style="border:none;" src="images/facebook.jpg" alt="Facebook" /></a></td></tr></table><tr><td colspan="2" bgcolor="#FFFFFF"><p align="center" style="font-size: 12px; line-height:18px;"><unsubscribe>Unsubscribe</unsubscribe> or <preferences>Change your Email Address</preferences></p>
</td></tr>
</table>
</body>
</html>
编辑:我已经用完整代码更新了它。但是，出于对客户的尊重，我更改了链接 href、图像描述和副本。每段虚拟文本的字符数与原始文本相同。问题单元格是包含字母-l.jpg 的单元格。
最佳答案
通常只需从 TD 中删除 bgcolor 并将其添加到表中即可解决此问题。奇怪的是，今天我遇到了同样的问题，但我的修复程序不再有效:(
关于iphone - 仅在 iPhone 上出现的电子邮件通讯中的奇怪差距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10709450/