HTML 邮件中 style 属性总是被去掉, 为什么?

题叶
  • 17.3k

用 Outlook 跟 Gmail 做测试, 不知道触发了什么规则, inline CSS 常常丢失,
比如我在 <td> 上加 padding:0 子节点某个 `<div> 的 style 全没了.
不理解

比如这样的 HTML, 通过 putsmail.com 服务发送到邮箱:

<table style="font-family:PingFang SC,Lantinghei SC,Helvetica Neue,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans;width:100%;background-color:#f7f7f7;border-collapse:collapse;border:none;"><tbody><tr><td style="padding:0;"><div style="font-size:24px;font-family:PingFang SC,Lantinghei SC, Microsoft Yahei, Helvetica Neue, sans-serif;font-weight:lighter;padding:32px 16px;">X message</div></td></tr><tr><td style="padding:0;"><div style="padding:8px 16px;"><span>${data.title}</span><span style="font-size:13px;font-family:Menlo,Consolas,Ubuntu Mono,monospace;margin-left:32px;color:#999999;">${data.time}</span></div><div style="padding:8px 16px;"><span>${data.message}</span><span style="font-size:13px;font-family:Menlo,Consolas,Ubuntu Mono,monospace;margin-left:32px;color:#999999;">${data.commit}</span></div><div style="padding:16px;background-color:#f0f0f0;font-family:Menlo,Consolas,Ubuntu Mono,monospace;font-size:14px;white-space:pre-wrap;line-height:1.6;color:#666666;margin:16px 0;">${data.logs}</div></td></tr><tr><td style="padding:0;"><div style="background-color:#293d29;color:#ffffff;padding:16px;font-size:12px;">by X</div></td></tr><tr></tr></tbody></table>

然后有一个节点的 style 就全丢失了.

clipboard.png

正常应该是这样的:

clipboard.png

回复
阅读 3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏