我对电子邮件模板是相对较新的,并且刚刚收集了一封酸订阅的基本电子邮件,因此我可以在所有客户中对其进行测试。
但是,就像许多其他人所经历的一样,我对Windows 10 Outlook/365客户端有问题,如下所示:
- 宽度并不符合
600px
- 每个
td/td之间的间距很小表
- 按钮
我一直在阅读有关如何满足Outlook的文章和帖子的文章和帖子,但我似乎正在使用所需的属性和幽灵表等。我还尝试使用基于VML的 对我来说不太工作。
因为有很多代码,所以我已将其提供给我还附上了一些来自酸测试的图像,以说明问题。
任何帮助都将不胜感激
应用更改后
将宽度问题更改为 50%
并添加 cellspacing = 0; cellpadding = 0;
很棒,但是右侧的横幅图像之后有一个轻微的空间。
我已经将填充,边框和背景颜色移到了父 td
上,现在按钮看起来和它们下面的线一样糟糕,并且位置很有趣。
我已经附加了更多图片来说明更改:
I am relatively new to email templates and have just took out a basic Email on Acid subscription so I can test it in all clients.
However, like many others have experienced, I am having issues with Windows 10 Outlook/365 clients, which are as follows:
- The width is not adhering to
600px
- There is slight spacing between each
td/table
- The text is highlighted on my buttons
I have been reading articles and posts about how to cater for Outlook, but I seem to be using the required attributes and ghost tables etc. I also tried using VML based buttons but these did not quite work for me.
Because there is a lot of code, I've made it available here and I have also attached some images from the acid test to illustrate the issue.
Any help would be much appreciated



UPDATE after applying changes
The width issue has gone after changing the two-column ghost table to 50%
and adding cellspacing = 0; cellpadding = 0;
which is great, but there is a slight space after the banner image to the right.
I have moved the padding, border, and background color to the parent td
and now the buttons look just as bad as they have lines under them and are in a funny position.
I've attached more pictures to illustrate the changes:



发布评论
评论(1)
在每个
< table>>
上,需要重置略微的表间距:这也可以解决宽度问题(或者代替width =“ 300” the Outlook Tables,您可以使用宽度=“ 50%”,它应该更好地重新调整所有内容)。
如果它只是前面没有任何文本的图像,则不必遇到使其成为背景图像的麻烦,因此只需使用
< img src =“ ...” ...“ ...”>
如果您有能力。关于该按钮,Outlook无法将内联元素更改为阻止或内联块,因此应将块信息(填充,边框,背景色)移至父型TD。您可以为其他客户端留下
display:inline-block
。还有另一种添加空间的技术,但涉及更多的技术,因此我不会在这里重复: https://www.goodemailcode.com/email-code/link-button
The slight table spacing needs to be reset by having this on each
<table>
:That may fix up the width issue too (or instead of width="300" for the Outlook tables, you can use width="50%", which should realign everything better).
If it's just an image without any text in front, you don't have to go to the trouble of making it a background image, so just use
<img src="...">
if you are able.Regarding the button, Outlook can't change inline elements to block or inline-block, so the block information (padding, border, background-color) should be moved to the parent td. You can leave
display:inline-block
for other clients.There is another technique where you add space, but it's much more involved, so I won't repeat it here: https://www.goodemailcode.com/email-code/link-button