我正在开发一个电子邮件通讯,它在我需要测试的所有电子邮件客户端(AOL、Hotmail、Yahoo、Gmail、Outlook、Lotus Notes、Thunderbird 等)中看起来都不错,但 iPhone 除外。甚至 iPad 看起来也不错,所以它不是 iOS 的东西。我使用了基于表格的布局,并且正在使用 litmus.com 进行测试。
这是屏幕截图:
这是我的表结构。(这是一个嵌套表格,只是新闻通讯的一部分。)
请注意,间隙仅在一侧。
两侧的图像高度相同,并且都具有<img>
标签中声明的宽度和高度。我以前处理过电子邮件通讯中的空白。在's 和's 之间添加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 的单元格。