Cheat Sheet速查表
跳转到主要内容

HTML 电子邮件 速查表

本文根据 Devhints / HTML emails 翻译。代码示例及版本范围沿用原文。原文标注更新日期：2017-08-30。

应避免使用的属性

属性位置
position（Outlook、Gmail、Yahoo）
display（Outlook、Gmail）
float(Outlook)
height(Outlook)
width 在 p/div 标签内(Outlook)
padding 在 p/div 标签内(Outlook)
background（Outlook、Gmail）
min-width(Outlook)
max-width(Outlook)
opacity（Outlook、Gmail、Yahoo）
box-shadow（Outlook、Gmail、Yahoo）
rgba()(Outlook)
data-uri(所有网页版邮箱)

应避免使用的选择器

E[attr]（Outlook、Gmail）
E:nth-child(n)（Outlook、Gmail）
::before 以及 ::after(Outlook、Yahoo、Gmail)
E F(Gmail)
E + F, E > F 等等（Outlook、Gmail）

尽可能将 CSS 内联（写在标签内部）。

基础布局

<table cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <td width="auto"></td>
    <td width="600" background="#ffffff">
      ···
    </td>
    <td width="auto"></td>
  </tr>
</table>

响应式

<style>
@media only screen and (max-device-width: 480px)
</style>

<style> 除 Gmail 外，其他平台均支持在 head 和 body 中使用。仅将其用于响应式样式。

参考资料

标签: htmlHTML 电子邮件速查表