字体大小不适用于 Outlook 2010 中的 <h2> 元素答案

【问题标题】：Font-size not applied to <h2> element in Outlook 2010字体大小不适用于 Outlook 2010 中的 <h2> 元素
【发布时间】：2016-11-19 03:39:06
【问题描述】：

我将font-size: 14px !important 应用于以下标记中的h2 和a 元素：<h2><a href="#">Content</a></h2>。但是，此标题在 Outlook 2010 中显得很大（就像默认的 h2 标题）。显然，font-size 规则未应用。但为什么呢？

这是我的代码更完整的部分：

<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
   <tr style="padding:0;text-align:left;vertical-align:top">
      <th style="Margin:0;color:#686868;font-family:Helvetica,Arial,sans-serif;font-size:11px;font-weight:400;line-height:1.2;margin:0;padding:0;padding-bottom:0!important;text-align:left">
         <h2 class="small-text-center" style="Margin:0;Margin-bottom:10px;color:#063972!important;font-family:Times New Roman,Georgia,sans-serif!important;font-size:14px!important;font-weight:700!important;line-height:1.2;margin:0;margin-bottom:0!important;padding:0;text-align:left;word-wrap:normal"><a href="http://www.lefigaro.fr" class="supplement_titre" style="Margin:0;color:#063972!important;font-family:Times New Roman,Georgia,sans-serif!important;font-size:14px!important;font-weight:700!important;line-height:1.2;margin:0;padding:0;text-align:left;text-decoration:none">L'opposition projet de loi El Khomri ne faiblit pas</a></h2>
      </th>
   </tr>
</table>

【问题讨论】：

德雷克，其他样式有什么效果吗？只是为了确保问题出在字体大小上 :)
我没有能力对此进行测试，但尝试将font-size:14px!important; 更改为font-size: 14px !important;（添加空间）
是的，其余样式都很好用。 @Lucas我使用Foundation For Emails，它在！important之前生成没有空格的内联代码。如果他们这样做，那么我认为这不太可能是问题。
只是好奇 - 它是 H2 重要吗？出于这个原因，我倾向于避免在电子邮件中使用标题标签和段落标签。

标签： css html-email outlook-2010

【解决方案1】：

由于我无法回复@Ted Goas 的回复，因此这是我的解释。

无论出于何种原因，Outlook 都会忽略您在 <h2> 标记上设置的样式，即使您添加了 !important，它也不会接受它。

为了重复 Ted Goas 所说的，我同意使用标题标签会在 Outlook 中产生非常意想不到的结果。

最好的解决方案是在 <a> 上设置样式，在我们这样做的同时，还将您的文本环绕在 <span> 标记周围，因为这也解决了 Outlook 中的颜色问题。

以下是我在 Outlook 2010 中为解决此问题而编辑的代码：

<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
    <tr style="padding:0;text-align:left;vertical-align:top">
        <th style="Margin:0;color:#063972!important;font-family:Times New Roman,Georgia,sans-serif!important;font-size:14px!important;font-weight:700!important;line-height:1.2;margin:0;padding:0;text-align:left;text-decoration:none">
            <a href="http://www.lefigaro.fr" class="supplement_titre" style="Margin:0;color:#063972!important;font-family:Times New Roman,Georgia,sans-serif!important;font-size:14px!important;font-weight:700!important;line-height:1.2;margin:0;padding:0;text-align:left;text-decoration:none"><span style="Margin:0;color:#063972!important;font-family:Times New Roman,Georgia,sans-serif!important;font-size:14px!important;font-weight:700!important;line-height:1.2;margin:0;padding:0;text-align:left;text-decoration:none">L'opposition projet de loi El Khomri ne faiblit pas</span></a>
        </th>
    </tr>
</table>

展望 2010

【讨论】：

【解决方案2】：

如果可能，删除<h2> 并仅使用<a href> 本身，将所有内联样式放在锚标记中。这将否定 Outlook（和任何其他电子邮件客户端）在默认标签上放置的任何默认样式，例如 <h1>、<h2>、<p> 等。

【讨论】：