行高在Outlook 2010中无法使用HTML电子邮件

Question

Outlook 2010/Outlook 2007似乎没有遵循我的HTML电子邮件中的行高.(它在Outlook 00和Outlook 03中完美运行)

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

我已经尝试将line-height放在块父元素和子段元素上,并将其放在head中样式标记中的ID上,以及上面的每个组合.

我还确保我明确地将行高声明为一个比文本大小大得多的像素值(但我也试过%和em).尝试把重要的东西放在声明中 - 甚至尝试与我在网上找到的每个其他小费一起使用...我一直在使用行高来确定按钮填充顶部和填充底部,因为HTML Email支持填充/保证金太差了.

我真的很感激任何帮助.现在真的处于领先地位!

实际的电子邮件是巨大的,因为它是一个复杂的时事通讯,但这里是头部风格的片段,以及行高不起作用的表格部分 - 我希望这已经足够了!:

<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" width="650" height="33" bgcolor="#262626">

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

                                    <!-- Row 1.1 -->
                                    <tr valign="top">
                                        <td style="" valign="top" width="16" height="" 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;" width="490" height="33" 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;" width="62" height="33" bgcolor="">
                                            <p>find us on:</p>
                                        </td>

                                        <td style="" valign="top" width="16" height="" bgcolor="">
                                        </td>
                                    </tr>

                                </table>

                            </td>
                        </tr>

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

Answer 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;.填充只是防止段落标记创建不必要的空间.

Answer 2

Outlook支持以百分比指定的行高.例如,不支持行高:1.1,但行高:110%.

Answer 3

迟到的回复,但由于我最近在Outlook中遇到类似的行高问题,我想分享我的hacky解决方法.

无论出于何种原因,如果您在指定行高的标记的CLOSING标记之前将HTML无序列表放入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中的一个ESP,Gmail的当前版本(2012年7月27日)以及iPhone电子邮件应用程序在我的模板中运行.我不知道这个技巧是否普遍修复了其他标签中的线高问题.我也承认它是一个笨重的解决方案,但它是一个笨重的问题; 而且,正如Outlook公然无视HTML规范一样,修复通常与问题一样愚蠢.如果需要,请使用此选项,但在发送给实际收件人之前进行广泛测试.

Answer 4

要使行高在 Outlook 中正常工作，请添加“mso-line-height-rule：exact;”后 在行高之前，确保使用百分比而不是小数值（即 150% 而不是 1.5）

Answer 5

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

可以在这里找到受支持的 css 的完整列表，这里有教程。

但你还必须考虑你的接收者 - 如果它们在 google mail 或 yohoo mail 上，你的 css 可以被完全剥离

开发电子邮件通讯的一个很好的资源是campaignmonitor.com/resources，他们还对所有电子邮件服务及其 HTML/CSS 功能进行重复检查