Outlook 2016 - 具有默认行高的第一行，mso-line-height-rule 不起作用

Question

我正在尝试为 Outlook 2016 开发 HTML 电子邮件，但我遇到了行高问题。关于这个问题有很多线索，但对我没有任何帮助。我的 table 中有几个 "lines" （td 单元格）和 1px 显示 w/o 问题，问题是消息的第一行。

我尝试添加内联样式 mso-line-height-rule: exactly in combination with line-height: 1px or 0px or 0 or 1. 结合 font-size: 0px or 1px or 0 or 1. 没有任何效果。所以我在有问题的元素之前放置了另一个元素，问题就转移到了 "new" 元素，从原来的元素中消失了。 Outlook 2016的版本是1808(build 10730.20344)，感觉之前用了一段时间都正常，没有什么技巧。

<style>
    td {
        padding: 0px;
        margin: 0px;
        border: 0px;
    }

    table {
        border-collapse: collapse; 
        border-spacing: 0px;
        font-family: "Arial", Arial, Helvetica, sans-serif;
        font-size: 14px;
    }

    td#line {
        background-color: #f0f0f0;
    }
</style>

<body style="margin: 0px;">
    <table cellpadding="0" cellspacing="0" style="table-layout:fixed;">
        <tr height="1" style="mso-line-height-rule: exactly; line-height: 1px; font-size: 0px;">
            <td height="1" id="line" colspan="5" style="mso-line-height-rule: exactly; line-height: 1px; font-size: 0px; "></td>
        </tr>
        <tr>
            ...

谢谢！

Answer 1

最后我找到了一些变通解决方案...您可以在下面找到简单的示例。

选项 1（隐藏 <div> 一些文字，w/o mso-hide: all 样式） :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="cs" xml:lang="cs">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <style>
            table {
                border-collapse: collapse; 
                border-spacing: 0px;
            }
        </style>
    </head>
    <body>
        <div style="overflow:hidden; color:transparent; visibility:hidden; width:0; font-size:0; opacity:0; height:0; line-height:0;">Some not visible text</div>
        <table cellpadding="0" cellspacing="0" border="0">
            <tbody>
                <tr height="1">
                    <td colspan="3" style="background-color: red;"></td>
                </tr>
                <tr>
                    <td width="1" style="background-color: blue;"></td>
                    <td width="160" style="background-color: yellow;">Some very nice text!<br />With 2 lines!</td>
                    <td width="1" style="background-color: blue;"></td>
                 </tr>
                 <tr height="1">
                    <td colspan="3" style="background-color: red;"></td>
                 </tr>
            </tbody>
        </table>
    </body>
</html>

效果相对较好，但如果您单击消息中的 somewhere/select 内容，您的第一个可见项（例如 <td>）将会消失。

选项 2（隐藏 <div> 一些文本，w/ mso-hide: all 样式，有条件地额外显示高度为零且背景透明的行）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="cs" xml:lang="cs">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <style>
            table {
                border-collapse: collapse; 
                border-spacing: 0px;
            }
        </style>
    </head>
    <body>
        <div style="overflow:hidden; color:transparent; visibility:hidden; mso-hide:all; width:0; font-size:0; opacity:0; height:0; line-height:0;">Some not visible text</div>
        <table cellpadding="0" cellspacing="0" border="0">
            <tbody>
                <!--[if gte mso 9]>
                <tr height="0">
                    <td colspan="3" style="background-color: transparent;"></td>
                </tr>
                <![endif]-->
                <tr height="1">
                    <td colspan="3" style="background-color: red;"></td>
                </tr>
                <tr>
                    <td width="1" style="background-color: blue;"></td>
                    <td width="160" style="background-color: yellow;">Some very nice text!<br />With 2 lines!</td>
                    <td width="1" style="background-color: blue;"></td>
                 </tr>
                 <tr height="1">
                    <td colspan="3" style="background-color: red;"></td>
                 </tr>
            </tbody>
        </table>
    </body>
</html>

那就比较牢不可破了

唯一不好的是 Outlook 会显示有关可能出现错误呈现的警告。很可能是由 <div> 标记使用引起的。

编辑：警告是由 height: 0 和 width: 0 在 <div> 样式中引起的。我认为可以删除这些属性。

尽情享受吧！

Outlook 2016 - 具有默认行高的第一行，mso-line-height-rule 不起作用

Outlook 2016 - first line with default line-height, mso-line-height-rule doesn't work

css

height

line

office365

outlook-2016