Outlook渲染问题，渲染文本太大

Question

我正在尝试为我们的组织创建新闻通讯标准，但遇到 Outlook 呈现文本过大的问题。

这是页面的 css 部分

body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 75%;
    background: url(http://www.blah.com/stuff.gif);
    }
a {
    color: #f24c22 !important;
    }
a:visited {
    color: #f24c22 !important;
    }
a:hover {
    color: #3d7ac5 !important;
    }
table {
    background: #ffffff;
    }
h1 {
    font-size: 1.3em;
    }
h2 {
    font-size: 1.2em;
    color: #494949;
    padding-top: 0 !important;
    margin-top: 0 !important;
    }
h3 {
    font-size: 1.1em;
    color: #12377c;
    }
p {
    padding-top: 0 !important;
    margin-top: 0 !important; 
    color:#333333;
    }
   .style1 {color: #333333}
   .style2 {color: #12377c}
   .style3 {
       font-size: smaller;
       color: #666666;
   }

有什么建议可能导致这种情况吗？

Answer 1

您是否尝试过使用 main *{font-size: 12pt;} ？

Outlook 默认情况下使用 Trident、IE 引擎来处理传入邮件，并使用 Word HTML 渲染引擎来处理传出邮件... 直到 Office 2007，人们都讨厌它。

现在，它使用 Word 2007 的渲染，是比较缺乏。 在 Microsoft 页面上，您可以看到 body 元素不支持 style 属性。

Answer 2

如果您想为字体设置特定大小，那么您可能应该使用固定大小类型，例如 pt。 而不是像 em/% 这样的变量

请参见此处了解我的意思。

Answer 3

许多邮件阅读器从收到的任何电子邮件中删除“正文”标签，或者忽略应用于此元素的样式。 尝试将字体大小应用于封闭的 div。

Answer 4

将字体大小抽象为更小，我发现在标准视图中这是等效的大小。 考虑到它是一个基本模板，重写 div 中的页面，引用 div 的 ID 来渲染，效果很好。 在各种电子邮件帐户（包括 gmail、hotmail）上进行了测试，并通过 Outlook 呈现。 Outlook 是唯一有问题的，同一页面引用链接失败。

Answer 5

添加这些元标记，您会发现 Word/Outlook“神奇地”将页面（包括图像）呈现为正确的大小：

<meta name="ProgId" content="Word.Document" />
<meta name="Generator" content="Microsoft Word 12" />
<meta name="Originator" content="Microsoft Word 12" />

我不知道为什么 Outlook 会这样做，我收到的大多数公司电子邮件在 Outlook 中看起来很糟糕 - 但是，使用这些标记，我发送的看起来很原始。