Question

我正在尝试为Outlook 2016开发HTML电子邮件，但行高有问题。关于这个问题有很多话题，但是没有任何帮助。我的表格中没有几行显示1px的“行”（td单元格），没有出现问题，问题出在消息的第一行。

我试图添加内联样式mso-line-height-rule：与line-height结合使用：1px或0px或0或1。与font-size结合使用：0px或1px或0或1。没事。因此，我在有问题的元素之前放置了另一个元素，而问题刚刚移到“新”元素，从原来的元素消失了。 Outlook 2016的版本为1808（内部版本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>，带有一些文本，不提供 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>

效果相对较好，但是如果您单击某处/在邮件中选择某项，则您的第一个可见项（例如<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的第一行不起作用

1 个答案: