Outlook 2007+间距问题

时间:2016-08-28 18:42:27

标签: html email html-email

我想隐藏Outlook 2007+中的一行并将其替换为条件行。

由于某种原因,条件行错误地渲染了多余的间距(可能是填充或边距)。

奇怪的是,如果我从条件行中获取代码并使用它来替换原始行,则它会正确呈现。只有当我有条件地称它为混乱时才会这样。

这是我的代码。有什么想法吗?

<!--[if (gte mso 9)|(IE)]>
<tr>
    <td>
        <table width="100" cellspacing="0" cellpadding="0">
            <tr>
                <td class="text caT" valign="bottom" style="font-size: 18px;font-weight: bold;Margin:0;line-height:14px;color: #17a0ce; vertical-align: bottom;">
                    <img style="vertical-align: bottom;" src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="B" />
                </td>
                <td valign="middle" style="font-size: 18px;font-weight: bold;Margin:0;line-height:14px;color: #17a0ce; vertical-align: middle;">Alone</td>
            </tr>
        </table> 
    </td>
</tr>
<![endif]-->
<tr>
    <td class="text" valign="middle" style="font-size: 18px;font-weight: bold;Margin:0;line-height:14px;color: #f49ac1; vertical-align: middle;mso-hide: all">
        <img style="vertical-align: middle;" src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="B" /> Back
    </td>
</tr>

1 个答案:

答案 0 :(得分:2)

在每个mso-height-rule: exactly;声明之前添加line-height将在Outlook中强制执行line-height

为每个图像添加display: block;将消除Outlook中图像下方的额外空间。

<td class="text caT" valign="bottom" style="font-size: 18px;font-weight: bold;Margin:0; mso-height-rule: exactly; line-height:14px;color: #17a0ce; vertical-align: bottom;">
    <img style="vertical-align: bottom;" src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" style="display: block;" alt="B" />
</td>
<td valign="middle" style="font-size: 18px;font-weight: bold;Margin:0; mso-height-rule: exactly; line-height:14px;color: #17a0ce; vertical-align: middle;">
    Alone
</td>