仅在iPhone上出现的电子邮件通讯中的奇怪缺口

Question

我正在开发电子邮件时事通讯，并且在iPhone上需要测试的所有电子邮件客户端（AOL，Hotmail，Yahoo，Gmail，Outlook，Lotus Notes，Thunderbird等）中看起来都很不错。 甚至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，图像描述和副本。 虚拟文本的每个段落与原始文字的字符计数相同。 问题单元格是包含letter-l.jpg的单元格。

Answer 1

通常只需从TD中删除bgcolor并将其添加到表中即可解决此问题。 奇怪的是，今天我遇到了同样的问题，我的解决方法不再起作用了：(