html电子邮件仅在Safari中破解

时间:2015-01-05 10:35:15

标签: html safari html-email

如果您查看附加的屏幕截图,您将看到我为HTML电子邮件创建的设计。 Screen Shot

在我运行的所有测试中,以下是彼此相邻的一行。

徽标," VIP版"和查看所有交易按钮。

在Safari中,VIP版和查看所有优惠会连续下降,徽标会居中。任何人都可以向我解释这种行为吗?我很难理解为什么它不会发生在邮件的其他部分,我无法想出如何用这句话来表达我的答案。

2 个答案:

答案 0 :(得分:0)

很高兴看到您的代码,即使只是针对该部分。

但我之前已经看到了这一点,我知道当我看到这个时,通常是我在父td上有两个对齐的表格,其中有一个align = center。

例如,在您的实例中,VIP Edition徽标将位于左对齐的表格中,而View all deals按钮将位于右对齐的表格中。 确保两个对齐表格的td外壳没有设置对齐属性。

解决这个问题总能解决我的问题。 如果您需要将移动元素置于中心位置,请将align = center更进一步设置

答案 1 :(得分:0)

我最后重新开始,我只能假设它与列的宽度有关。我发现这个post很有用。

在框架部分,我决定尝试一些。我尝试的第一个是Zurb Foundations Ink,因为我过去曾使用过Zurb Foundation。但是,根据自己的喜好,他们支持的客户端不是comprehensive enough。他们没有提到不同的浏览器,在我看来这很重要。我上个月做了很多测试。我会花时间对它进行更彻底的测试,至少他们提供的版本可以在Gmail中响应,不使用媒体查询。

想要在开箱即用的所有平台上运行的东西我尝试使用Acid on Acid的响应模板。它看起来很棒,我使用Email on Acid进行测试,所以我认为他们会解决它。他们的网站上充满了有用的滴滴声。但是,他们的模板在Safari中不起作用,并且遇到了我最初开始的下拉问题。他们并没有声称它在那里工作,但是当他们提供测试服务时,我曾希望它可以在他们使用的所有平台上运行。

然后我转到了AntWorts解决方案。这在我的初步测试中起作用,我发现很容易适应我的需求,最终使用他们的方法添加了额外的列,这在一个模板中清楚地解释了。

我的最终模板有1,2,3,4列网格,它们响应部分流体部分自适应。我对未来人们的建议是从这个样板开始,我从头开始重新编写整个模板,花了一半的时间来尝试对不同的样板进行故障排除。