Windows Outlook Office 365和Outlook-宽度,间距和按钮文本问题电子邮件渲染 - 电子邮件

发布于 2025-02-09 06:22:47 字数 1718 浏览 1 评论 0 原文

我对电子邮件模板是相对较新的,并且刚刚收集了一封酸订阅的基本电子邮件,因此我可以在所有客户中对其进行测试。

但是,就像许多其他人所经历的一样,我对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

Overview
Spacing
Button

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:

Outlook Overview
Outlook Buttons
Outlook Banner Spacing

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

我的影子我的梦 2025-02-16 06:22:47

在每个< table>> 上,需要重置略微的表间距:

<table cellpadding="0" cellspacing="0" ...>

这也可以解决宽度问题(或者代替width =“ 300” the Outlook Tables,您可以使用宽度=“ 50%”,它应该更好地重新调整所有内容)。

如果它只是前面没有任何文本的图像,则不必遇到使其成为背景图像的麻烦,因此只需使用&lt; img src =“ ...” ...“ ...”&gt; 如果您有能力。

关于该按钮,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>:

<table cellpadding="0" cellspacing="0" ...>

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文