我有一封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时,事情看起来很棒
当没有显示office_extension时,我们遇到了问题
可能导致显示问题的原因是什么?
注意:显示问题仅发生在iPad / iOS 7 / Mobile Safari / Gmail
上答案 0 :(得分:1)
删除<table>
元素上的填充。永远不要在表格上添加填充,始终只将它们放在<td>
中。如果您需要填充整个东西,请将其嵌入另一个表格并填充该表格<td>
。
另外,将图片的宽度设置为width="100%"
。这应该可以防止它弹出所需的布局。
你的动态标签也可能在那里放置一些古怪的东西。如果您使用Litmus Scope浏览器插件来查看实际到达Gmail的最终代码。这应该揭示正在发生的事情。
答案 1 :(得分:0)
经过多次试验和错误后,看起来这就是Gmail的问题。
这是我的问题。
测试时,我会发送两个测试,一个带有电话分机,一个没有。 Gmail会对这些邮件进行分组,并对第一封邮件中的每封邮件使用相同的布局。因此,如果我首先发送带有电话分机的电子邮件,那么没有电话分机的电子邮件就会出现显示问题。如果我先发送没有电话分机的电子邮件,那么带有电话分机的电子邮件就会出现显示问题。
专业提示:清空垃圾箱并一次发送一封电子邮件