我的像素未正确显示在 Outlook 桌面中电子邮件 html 的按钮中？答案

【问题标题】：My pixels aren't displayed correcly in a button in Outlook desktop for an email html?我的像素未正确显示在 Outlook 桌面中电子邮件 html 的按钮中？
【发布时间】：2022-01-17 16:31:21
【问题描述】：

我正在尝试在 Outlook 中创建一个垂直居中的按钮，我正在使用另一个开发人员处理的代码，并尝试重新调整它

在代码中我试图设置固定值以避免任何问题，但在 Outlook 中它会显示额外的空间

在 Outlook web、移动设备、Gmail、浏览器等中，这是好的和预期的：

在 Outlook 桌面版中：

这是我用我的 html 代码设置的逻辑：

1 px 的边框和 8 px 的两个间隔行，以及 line-height 的文本容器：18px； ..

这是我的 HTML

<tr>
    <td valign="middle" style="padding: 0px; vertical-align: middle;height:35px;" align="center" height="35">
        <table
            style="border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: none;height:35px;"
            cellspacing="0" cellpadding="0" border="0" height="35">

            <tr>
                <td valign="middle" border="1" class="borders" dir="ltr"
                    style="padding: 0px; vertical-align:middle; border: 1px solid #4E4E4E; border-image: none; width: 220px; height: 34px; text-align: center; color: #4B4B4B; text-transform: uppercase; text-decoration: none; vertical-align: middle; background-color: #EBEBEB;"
                    bgcolor="#303335" align="center" height="34">
                    <table
                        style="border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: none;"
                        cellspacing="0" cellpadding="0" border="0">
                        <tr>
                            <td dir="ltr"
                                style="padding: 0px; border-image: none; width: 220px; height: 8px; text-align: center; color: #4B4B4B; text-transform: uppercase; text-decoration: none;  background-color: #ffffff;vertical-align: middle;"
                                valign="middle" height="8" bgcolor="#ffffff" align="center">
                            </td>
                        </tr>
                        <tr>
                            <td dir="ltr"
                                style="padding: 0px; border-image: none; width: 220px;  text-align: center; color: #4B4B4B; text-transform: uppercase; text-decoration: none; line-height: 18px; font-size: 15px; background-color: #EBEBEB;vertical-align: middle;"
                                valign="middle" bgcolor="#303335" align="center">
                                <a href="%%=RedirectTo(CONCAT( TreatAsContent(@contentblock_link), '&amp;utm_clickposition=cta', TreatAsContent(@contentblock_link_anchor)))=%%"
                                    style="color: #4B4B4B ; text-transform: uppercase; vertical-align: middle; line-height: 18px; letter-spacing: 0.5px; font-family: &quot;HelveticaNeueLight&quot;, Helvetica, Arial, sans-serif; font-size: 15px; text-decoration: none; display: inline-block; ">%%=Field(@campaign_input_data,
                                    concat(@contentblock, '_cta'))=%%</a>
                            </td>
                        </tr>
                        <tr>
                            <td dir="ltr"
                                style="padding: 0px; border-image: none; width: 220px; height: 8px; text-align: center; color: #4B4B4B; text-transform: uppercase; text-decoration: none;  background-color: #ffffff;vertical-align: middle;"
                                valign="middle" height="8" bgcolor="#ffffff" align="center">
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>

【问题讨论】：

在td的空白处使用&zwnj;

标签： html outlook html-email email-templates

【解决方案1】：

您的第三行似乎正在扩大。我相信正在发生的事情是 Outlook 正在插入一个空白段落 - 尽管为什么第一行没有发生这种情况也是一个谜。

为确保空白行的高度正确（在<td>'s 之间），请使用以下结构：

<p style="margin:0;padding:0;font-size:8px;line-height:8px;">&nbsp;</p>

还要确保<td>'s 之间没有空格。为了保持一致性，我会在顶行和底行使用它。（一旦你这样做了，你就不需要height: 8px; 风格的<td>。）

【讨论】：