html - 行高在 HTML 电子邮件的 Outlook 2010 中不起作用

Question

Outlook 2010/Outlook 2007 在我的 HTML 电子邮件中似乎不支持行高。 (它在 Outlook 00 和 Outlook 03 中完美运行)

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

我试过将 line-height 放在 block 父元素和子段落元素上，并放在头部样式标签中的 ID 上，以及上述的每一个组合。

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

我真的很感激任何对此的帮助。现在真的到了令人头疼的地步!

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

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