Question

我想创建HTML简报，但在Outlook中，发送的邮件不符合我写的CSS：

以下代码在Outlook

中无效

body {
    font-family: verdana !important;
    font-size: 12px !important;
    margin: 0;
    padding: 0;
}

.overheader {
    height: 5px;
    background-color: #e6007e;
    width: 100%;
}
.ce-bodytext {
    font-family: verdana !important;
    font-size: 12px !important;
}

我尝试使用内联CSS，但无济于事：

<div class="wrapper content" style="width: 100%">
   <div class="design" style="width: 70%; margin: auto;">

问题是什么？如何更改代码以便CSS和HTML在浏览器，Outlook以及其他Web邮件程序中工作？

Answer 1

不要使用类，因为所有电子邮件客户端都会删除html head元素及其中的所有元素，例如脚本和样式表链接。

以下是如何使用居中的70％宽内部元素实现100％主宽度，就像您发布的样本html一样，尽管我在这里使用了table，因为这是最好/最安全的布局方式对于HTML邮件，即使在2016年。

<table bgcolor="#aaa" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td align="center">
      <table bgcolor="#eee" border="0" cellpadding="0" cellspacing="0" width="70%">
        <tr>
            <td style="font-size: 26px; font-family: arial">
               Some text...
            </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

HTML通讯模板

1 个答案: