大家好,营销人员和非营销人员! enKod 的 Lilith 正在通话中
您是否遇到过这样的情况:在 Gmail、Mail.ru 和其他电子邮件服务上正确显示的电子邮件在 Outlook 上却严重失真?
这是长期从事电子邮件营销和测试电子邮件的人常见的痛点。
我们与技术专家 Anton 一起收集了有助于使 HTML 电子邮件与 Outlook 兼容的实用技巧。
为什么 Outlook 中的 CSS 样式存在问题?
HTML 和 CSS 是两种主要的 Web 开 电话号码 发语言,广泛用于电子邮件中,以创建美观且功能齐全的模板。电子邮件中的 HTML 用于创建基本结构和内容。 CSS 负责 HTML 元素的外观:它决定颜色、字体、缩进、大小和位置。它为网页添加了风格并改善了用户体验。
Outlook 使用 Microsoft Word 引擎来呈现 HTML 内容。由于 Word 的 CSS 和 HTML 渲染能力有限,这会导致电子邮件外观扭曲。
Outlook 缺乏对许多 CSS 样式的支持,这导致了许多我个人遇到的问题:
1. 适应性有限
Windows 上的 Outlook 不支持flexbox、CSS Grid或媒体查询,因此响应式设计变得困难,甚至不可能。
这在移动设备上尤其明显,电子邮件需要看起来整洁、紧凑,但桌面上的 Outlook 可能无法达到这一要求。
2. 元素定位和对齐不正确
Outlook 不支持使用位置:相对、绝对或固定进行定位。这使得灵活排列元素变得困难。
为了对齐和创建布局,开发人员被 今天您可以获得的交易 迫使用表格并添加额外的 <tr> 和 <td> 来正确定位内容,这增加了 HTML 的数量并使代码变得复杂。
3.缺乏保证金支持:
Outlook 会忽略边距属性,尤其是外部块,并且还可能错误地处理嵌套元素上的填充。
为了解决这个问题,开发人员必须使用填充或插入额
5.缺乏对伪类和伪元素的支持:
伪类(:hover、:active、:first-child)和伪元素(::before、::after)在 Outlook 中不起作用,从而消除了交互元素和悬停效果。
这降低了电子邮件的交互性并消 瓦爾哈拉公民禮堂 除了动态内容的附加样式。