Outlook 渲染问题，渲染文本过大答案

【问题标题】：Outlook rendering problem, rendering text too largeOutlook 渲染问题，渲染文本过大
【发布时间】：2010-09-22 15:14:45
【问题描述】：

我正在尝试为我们的组织创建新闻通讯标准，但遇到 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;
   }

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

【问题讨论】：

您使用的 Outlook 版本非常重要。例如，Outlook 2007 通过 Word 的呈现引擎呈现 HTML 电子邮件，这可能会导致您的问题。

标签： css outlook rendering outlook-2007

【解决方案1】：

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

默认情况下，Outlook 使用 Trident，即 IE 的接收邮件引擎，以及用于发送邮件的 Word HTML 呈现引擎...Until Office 2007, and people hate it.

现在，it uses Word 2007's rendering，至于 is rather lacking。 On microsoft's page 你可以看到de body 元素不支持style 属性。

【讨论】：

【解决方案2】：

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

See here 我的意思。

【讨论】：

毫无疑问，我的直觉是正文上 75% 的字体大小被忽略或误解了。尝试在 body 上使用固定尺寸，您的 em 尺寸应该保持一致。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案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 中看起来都很糟糕 - 但是，有了这些标签，我发送的那些看起来很原始。

【讨论】：