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

时间:2012-01-24 01:17:40

标签: html email outlook css

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

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

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

我还确保我明确地将行高声明为一个明显大于文本大小的像素值(但我也试过%和em)。尝试把重要的东西放在宣言中 - 甚至尝试了与我在网上找到的其他每个小贴士的价值。我一直在使用行高 - 例如确定按钮填充顶部和填充底部,因为HTML电子邮件支持填充/边距是如此错误。

我真的很感激这方面的任何帮助。现在真正处于领先地位!

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

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

7 个答案:

答案 0 :(得分:39)

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

答案 1 :(得分:18)

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

答案 2 :(得分:11)

迟到的回复,但由于我最近在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规范的情况一样,修复通常与问题一样愚蠢。如果需要,请使用此选项,但在发送给实际收件人之前对其进行广泛测试。

答案 3 :(得分:3)

Outlook使用单词html处理器来渲染和编辑html。习惯了表格布局并忘记了css,如果 - 只使用内联css。你只有几种可能性:background,font-family,font.size,color。

可以找到支持的css的完整列表here,教程是here

但你也必须考虑你的接收器 - 如果他们在谷歌邮件或yohoo邮件你的CSS可以完全剥离

开发电子邮件简报的一个很好的资源是campaignmonitor.com/resources,他们也在重复检查所有电子邮件服务及其HTML / CSS功能

答案 4 :(得分:3)

要在Outlook中使用行高,请在添加“mso-line-height-rule:exact;”之后在行高之前,请确保使用百分比而不是十进制值(即150%而不是1.5)

答案 5 :(得分:1)

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

答案 6 :(得分:-1)

解决此问题的最佳方法是使用相对位置和top属性,它的工作原理就像一个魅力,请参见下面的示例代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:weightSum="1"
    android:orientation="horizontal">
    <TextView
        android:id="@+id/txtId"
        android:layout_weight=".15"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="top"
        android:text="@string/id"
        android:textSize="18sp" />
    <TextView
        android:id="@+id/txtManager"
        android:layout_width="0dp"
        android:layout_weight=".25"
        android:layout_height="match_parent"
        android:layout_gravity="top"
        android:text="@string/manager"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/txtCreatedDate"
        android:layout_width="0dp"
        android:layout_weight=".25"
        android:layout_height="match_parent"
        android:layout_gravity="top"
        android:text="@string/created_on"
        android:textAlignment="center"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/txtExecutionDate"
        android:layout_width="0dp"
        android:layout_weight=".25"
        android:layout_height="match_parent"
        android:layout_gravity="top"
        android:text="@string/executed_on"
        android:textAlignment="center"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/txtDone"
        android:layout_width="0dp"
        android:layout_weight=".1"
        android:layout_height="match_parent"
        android:layout_gravity="top"
        android:text="@string/is_done"
        android:textAlignment="center"
        android:textSize="18sp" />
</LinearLayout>