行高在 Outlook 2010 for HTML 电子邮件中不起作用

Posted 2023-03-15

【中文标题】行高在 Outlook 2010 for HTML 电子邮件中不起作用

【英文标题】：Line-height not working in Outlook 2010 for HTML Email

【发布时间】：2012-02-17 08:28:03

【问题描述】：

Outlook 2010/Outlook 2007 在我的 html 电子邮件中似乎没有遵守行高。 （它在 Outlook 00 和 Outlook 03 中完美运行）

我一直在做一些广泛的谷歌搜索 - 我发现 HTML CSS 支持图表表明 Outlook 2010/2007 应该了解行高。

我尝试将 line-height 放在 block 父元素和子段落元素上，以及放在 head 中 style 标记中的 ID 上，以及上面的每个组合上。

我还确保我明确声明 line-height 是一个明显大于文本大小的像素值（但我也尝试了 % 和 em）。尝试将 !important 放入声明中 - 甚至尝试 valign 以及我可以在网上找到的所有其他提示......我一直在使用 line-height 来举例确定按钮 padding-top 和 padding-bottom，因为 HTML 电子邮件对 padding/margin 的支持是如此错误。

我非常感谢您对此的任何帮助。现在真的是头疼！

实际的电子邮件很大，因为它是一份复杂的时事通讯，但这里是头部样式的 sn-p，以及行高不起作用的表格部分 - 我希望这就足够了！：

<style type="text/css" media="screen">
    html 
        -webkit-text-size-adjust:none;
        -webkit-background-size:100%;
    
    body
        margin: 0px 0px 0px 0px !important;
        padding: 0px 0px 0px 0px !important;
        margin-bottom:0px !important;
        margin-top:0px !important;
        background-color:#e5e5e5;
    
    p
        margin: 0px 0px 0px 0px !important;
        padding: 0px 0px 0px 0px !important;
        margin-bottom:0px !important;
        margin-top:0px !important;
        display:block;
    
    a:link, a:visited, a:active
        color:#55c2d9;
        text-decoration: underline;
    
    a:hover 
        text-decoration: underline; 
    
    .body a:link, a:visited, a:active
        color:#55c2d9;
    
    img
        border: 0;
        display: block;
    
    table.main 
        background-color: #ffffff;
        width:650px;
    
    td 

    
    #header-top p
        line-height:33px;
    

</style>

                    <!-- Content -->
                    <table border="0" cellspacing="0" cellpadding="0" class="body">
                        <!-- Row 1 -->
                        <tr valign="top">
                            <td background="images/bg-texture-top.jpg" style="background-repeat:repeat-y; background-color:#262626;" valign="top"   bgcolor="#262626">

                                <table border="0" cellspacing="0" cellpadding="0" id="header-top">

                                    <!-- Row 1.1 -->
                                    <tr valign="top">
                                        <td style="" valign="top"   bgcolor="">
                                        </td>

                                        <td style="font-family: Helvetica, Arial, sans-serif; color:#767676; font-weight: bold; font-size:11px; line-height:33px; text-align:left; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;"   bgcolor="">
                                            <p><a href="#">click here to view this email in a browser</a></p>
                                        </td>
                                        <td style="font-family: Helvetica, Arial, sans-serif; color:#767676; font-weight: bold; font-size:11px; line-height:33px; text-align:left; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;"   bgcolor="">
                                            <p>find us on:</p>
                                        </td>

                                        <td style="" valign="top"   bgcolor="">
                                        </td>
                                    </tr>

                                </table>

                            </td>
                        </tr>

                    </table> <!-- Content -->

【问题讨论】：

以前的 Office 版本使用 HTML 小部件来显示和编辑 HTML 消息。 Outlook 2007 及更高版本使用 Word 小部件，这对于 HTML 来说非常糟糕。

【参考方案1】：

我使用内联 CSS 的组合来控制行高：

<p style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:110%;font-size:11pt;">paragraph text</p>

关键元素是 Microsoft 专有的 CSS 属性mso-line-height-rule: exactly;。填充只是防止段落标签创建不必要的空间。

【讨论】：

我喜欢这是一个 microsoft css 属性。是默认mso-line-height-rule: random吗？

mso-line-height-rule 让我恶心 :(

mso-line-height-rule 的另一个值是 at-least

mso-* 让任何 Web 开发人员畏缩不前。我迫不及待地等待世界对微软崩溃的那一天。

这些规则很好用，提供您不从服务器/服务或类似的发送。从 Outlook 2007、2010、2013 发送时，这些都将被删除。

【参考方案2】：

Outlook 支持以百分比指定的行高。 例如 line-height: 1.1 不支持，但 line-height: 110% 支持。

【参考方案3】：

响应迟了，但由于我最近在 Outlook 中解决了类似的行高问题，所以我想分享我的解决方法。

无论出于何种原因，如果您在指定行高的标记的 CLOSING 标记之前将一个无序列表放入 HTML 中，Outlook 2010 会考虑行高。

你可以让无序列表为空且不可见：

<ul style="list-style-type: none; visibility:hidden;"></ul>

例子：

<p style="font-size: 12px; line-height: 18px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul style="list-style-type: none; visibility:hidden;"></ul>
</p>

免责声明：我没有对此进行详尽的测试。它通过 Outlook 2010、Gmail 的当前版本（2012 年 7 月 27 日）和 iPhone 电子邮件应用程序中的一个 ESP 在我的模板中运行。我不知道这个技巧是否能普遍解决其他标签中的行高问题。我也承认这是一个笨拙的修复，但这是一个笨拙的问题。而且，与 Outlook 公然无视 HTML 规范的情况一样，修复通常与问题一样愚蠢。如果您愿意，可以使用它，但在发送给实际收件人之前对其进行广泛测试。

【讨论】：

这似乎是迄今为止解决这个问题最可靠的方法。感谢史蒂夫的分享。

【参考方案4】：

在添加“mso-line-height-rule：exactly;”之后，要在 Outlook 中使用 line-height在行高之前，请确保使用百分比而不是十进制值（即 150% 而不是 1.5）

【参考方案5】：

Outlook 使用 word html 处理器来呈现和编辑 html。习惯表格布局并忘记 css，如果 - 仅使用内联 css。您只有几种可能性：背景、字体系列、字体大小、颜色。

支持的 CSS 的完整列表可以在 here 找到，教程是 here。

但您还必须考虑您的接收者 - 如果他们在 google mail 或 yohoo mail 上，您的 css 可能会被完全删除

campaignmonitor.com/resources 是开发电子邮件通讯的好资源，他们还会反复检查所有电子邮件服务及其 HTML/CSS 功能

【参考方案6】：

在表格单元格上使用内联 css 设置 line-height 应该没问题，但你真的不需要那些 <p> 标记，这只会引入格式问题和对那些 <p> 标记的引用<head> 中的 <style> 标记将被许多客户端忽略。

【讨论】：

谢谢，表格单元格上的设置 line-height 对我有用 :) mso-line-height-rule: exactly 对我不起作用。

【参考方案7】：

解决这个问题的最佳方法是使用相对定位和顶部属性，这就像一个魅力，请参阅下面的示例代码

<div style="display: inline-block; ">
<font>Line 1</font><br/>
<font style="position: relative; top: -5px;">Line 2</font><br/>
<font style="position: relative; top: -10px;">Line 3</font><br/>
</div>