HTML电子邮件 - 图像显示问题 - 图像浮动在加入单元格下方

时间:2014-01-20 19:22:21

标签: html email mobile-safari twig html-email

我有一封HTML电子邮件,当加入单元格没有完整的电话号码w /扩展名时,图片显示有问题

Twig Values

office_phone = 800-555-1212
office_extension = 123 ( optional )

HTML

<table align="center" style="margin:0 auto;background:#fff;" border="0" width="660" cellpadding="0" cellspacing="0">
    <tr>
        <td>

            <!-- there is more code here but this is the section having the display issue -->

            <table style="background:#191b1d;padding-left:40px;" cellpadding="0" cellspacing="0" border="0" width="660">
                <tr>
                    <td width="40%" style="color:#fff;font-size:20px;text-transform:uppercase;">
                        Call {{ office_phone }}{% if office_extension %} x{{ office_extension }}{% endif %}
                    </td>
                    <td width="50%" style="margin:0 auto;padding-left:40px;">
                        <img style="display:block;border:none;" src="the_image.png" alt="Hello Image">
                    </td>
                </tr>
            </table>

            <!-- end display issue -->

        </td>
     </tr>
</table>

当显示office_extension时,事情看起来很棒

enter image description here

当没有显示office_extension时,我们遇到了问题

enter image description here

可能导致显示问题的原因是什么?

注意:显示问题仅发生在iPad / iOS 7 / Mobile Safari / Gmail

2 个答案:

答案 0 :(得分:1)

删除<table>元素上的填充。永远不要在表格上添加填充,始终只将它们放在<td>中。如果您需要填充整个东西,请将其嵌入另一个表格并填充该表格<td>

另外,将图片的宽度设置为width="100%"。这应该可以防止它弹出所需的布局。

你的动态标签也可能在那里放置一些古怪的东西。如果您使用Litmus Scope浏览器插件来查看实际到达Gmail的最终代码。这应该揭示正在发生的事情。

答案 1 :(得分:0)

经过多次试验和错误后,看起来这就是Gmail的问题。

这是我的问题。

测试时,我会发送两个测试,一个带有电话分机,一个没有。 Gmail会对这些邮件进行分组,并对第一封邮件中的每封邮件使用相同的布局。因此,如果我首先发送带有电话分机的电子邮件,那么没有电话分机的电子邮件就会出现显示问题。如果我先发送没有电话分机的电子邮件,那么带有电话分机的电子邮件就会出现显示问题。

专业提示:清空垃圾箱并一次发送一封电子邮件