在Outlook 2010 for HTML电子邮件中,行高不起作用 [英] Line-height not working in Outlook 2010 for HTML Email

查看:179
本文介绍了在Outlook 2010 for HTML电子邮件中,行高不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

Outlook 2010 / Outlook 2007似乎不符合我的HTML电子邮件中的行高。 (它在Outlook 00和Outlook 03中完美工作)

Outlook 2010/ Outlook 2007 does not appear to be honoring line-height whatsoever in my HTML Email. (It works perfectly in Outlook 00 and Outlook 03)

我一直在做一些大量的google搜索和HTML CSS支持图表我发现说Outlook 2010/2007应该了解线高。

I've been doing some extensive googling - and HTML CSS support charts I have found say that Outlook 2010/2007 SHOULD understand line height.

我试过把line-height放在块父元素和子段落元素上,以及头部样式标签中的ID上,每个组合上面。

I've tried putting the line-height on the block parent element, and the child paragraph element, and as on an ID in the style tag in the head, and every combination of the above.

我还确保我明确声明line-height是一个比文本大小大得多的像素值(但我尝试了%和em)。尝试了!在声明中重要 - 甚至尝试valign和每一个其他提示,我可以在网上找到....我一直在使用线高度。确定按钮padding-top和padding-bottom,因为HTML电子邮件支持填充/边距是如此的bug。

I've also ensured I am explicitly declaring line-height as a pixel value that is significantly larger than the text size (but I tried % and em too). Tried putting !important in the declaration - and even tried valign along with every other tip I could find online.... I have been using line-height to e.g. determine button padding-top and padding-bottom, since HTML Email support for padding/margin is so buggy.

我真的很感激任何帮助。真的在头脑风暴点!

实际的电子邮件是巨大的,因为它是一个复杂的通讯,但这里是一个片段的风格的头部和一个表部分,其中行高不工作 - 我希望这是够了!

The actual email is huge as it's a complicated newsletter, but here is a snippet of the style in the head, and a table section in which the line-height isn't working - I hope that is enough!:

<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 -->


推荐答案

高度:

< p style =padding:0px; margin:0px; margin-auto:0px; mso-line-height-rule :exact; line-height:110%; font-size:11pt;>段落文本< / p>

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

The key element is the Microsoft proprietary CSS attribute, mso-line-height-rule: exactly;. The padding just prevents the paragraph tags from creating unnecessary space.

这篇关于在Outlook 2010 for HTML电子邮件中,行高不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆