Fatal编程技术网
  • iphone/
  • 电子邮件时事通讯中只出现在iPhone上的奇怪缺口

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

iphone html css email

电子邮件时事通讯中只出现在iPhone上的奇怪缺口,iphone,html,css,email,newsletter,Iphone,Html,Css,Email,Newsletter,我正在开发一份电子邮件时事通讯，我需要测试的所有电子邮件客户端（AOL、Hotmail、Yahoo、Gmail、Outlook、Lotus Notes、Thunderbird等），除了iPhone之外，都很好看。甚至iPad看起来也不错，所以它不是iOS产品。我使用了基于表格的布局，正在使用litmus.com进行测试 以下是截图： 这是我的桌子结构。（这是一个嵌套表，只是新闻稿的一部分。） 请注意，间隙仅在一侧 两侧的两个图像高度相同，并且都具有 问候语， Lorem ipsum dolo

我正在开发一份电子邮件时事通讯，我需要测试的所有电子邮件客户端（AOL、Hotmail、Yahoo、Gmail、Outlook、Lotus Notes、Thunderbird等），除了iPhone之外，都很好看。甚至iPad看起来也不错，所以它不是iOS产品。我使用了基于表格的布局，正在使用litmus.com进行测试

以下是截图：

这是我的桌子结构。（这是一个嵌套表，只是新闻稿的一部分。）

请注意，间隙仅在一侧

两侧的两个图像高度相同，并且都具有

问候语，
Lorem ipsum dolor sit amet，Concetetur Adipsing Elite。这是一个很好的例子。做一个元素测试。这是一种不含奥奇的菱鲆。侵权行为、不正当行为和不正当行为。我在我的马萨修女学校做了一次演讲

Lorem ipsum dolor sit amet，Concetetur Adipsing Elite。南欧·乌尔纳是一个年轻人。这是一个很好的例子。我们是精英，我们是精英。奥奇·拉库斯（Aliquam orci lacus），尤伊斯莫德（euismod a）的名言，阿梅特·洛雷姆（amet lorem）的名言。Maecenas vitae justo nisi，不确定侵权人。等级：适用于每个国家的社会责任

Lorem ipsum dolor sit amet，Concetetur Adipsing Elite。南前庭pulvinar ullamcorper。无尾雀鳝（nullavarius pretium turpis vitae adipising）。在苏西比特，马来苏阿达的中间玉米饼，是一种智慧的结晶，是一种新品种。两人一组，一人一组。妊娠前庭

Lorem ipsum dolor sit amet，Concetetur Adipsing Elite。这是一个非常重要的问题。二人一组，温文尔雅，一人一组，一人一组。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。奥古斯酒。南阿酵母菌。直径为turpis的蜗牛

Lorem ipsum dolor sit amet，Concetetur Adipsing Elite。Donec ac orci为您提供了一个内部服务。在威尼斯人的便利设施中，使用了一种新的设备，使用了一种新的设备

字体系列：Helvetica，Arial，无衬线；颜色：#636364；线条高度：24px；字体大小：14px；“>Lorem ipsum dolor sit amet，Concetetur Adipising Elite。这是一个非常有趣的故事。Phasellus和ullamcorper lorem。小叶扁豆。Proin justo magna，aliquam amet

字体系列：Helvetica，Arial，无衬线；颜色：#636364；线条高度：24px；字体大小：14px；“>Lorem ipsum dolor sit amet，Concetetur Adipising Elite。这是一种不安全的行为。埃尼安·洛博蒂斯·奥奇（Aenean lobortis orci）位于塞姆珀的索利西图拉岛（ligula sollicitudin semper）。潜力悬钩子。软毛库拉索酒店。克拉斯·艾米特

字体系列：Helvetica，Arial，无衬线；颜色：#636364；线条高度：24px；字体大小：14px；“>Lorem ipsum dolor sit amet，Concetetur Adipising Elite。两个人在一起时都是一个好朋友。两种调味品，一种是大调味品，另一种是小调味品。罗汉果是一种天然的植物，但它的生命力却很强。Fusce nullam

字体系列：Helvetica，Arial，无衬线；颜色：#636364；线条高度：24px；字体大小：14px；“>Lorem ipsum dolor sit amet，Concetetur Adipising Elite。自由毛里斯前庭，舷梯和舷梯，直径。提前中止。整型和腔隙门。这是我们的元素

字体系列：Helvetica，Arial，无衬线；颜色：#636364；线条高度：24px；字体大小：14px；“>Lorem ipsum dolor sit amet，Concetetur Adipising Elite。这是一种交通工具。在阿利夸姆的一场比赛中。这是一个很好的例子

字体系列：Helvetica，Arial，无衬线；颜色：63636364；线条高度：20px；字体大小：12px；“>Lorem ipsum dolor sit amet，Concetetur Adipising Elite。埃尼安·拉奥里特（Aenean laoreet tincidunt ipsum eget ultricies）。莫利斯元素。佩伦特斯凯电子有限公司。普罗恩·纳拉费利斯，康格·纳勒姆

取消订阅或更改您的电子邮件地址
编辑：我已经用完整的代码更新了它。然而，出于对客户端的尊重，我已经更改了链接href、图像描述和副本。伪文本的每个段落的字符数与原始段落相同。问题单元格是包含字母-l.jpg的单元格。

通常只需从TDs中删除bgcolor并将其添加到表中即可解决此问题。s 
<!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>