无法让这些元素在 Microsoft Outlook 中完美对齐且高度相同

Question

我已经搞了将近 2 个小时了，但仍然无法在 Microsoft Outlook 中以正确的方式呈现它。

让它在 Internet Explorer 中呈现已经够痛苦的了，但我明白了：

不过，它在 Outlook 中看起来像 HTML 电子邮件：

暂时不要担心换行；我需要解决的问题是

(1) 左片与中片之间space白色垂直1个像素

(2) 中心块比左右块高像素

这是HTML：

            <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
                <tr>
                    <td align="left" width="6" height="35">
                        <img src="images/left-button-corner.png" style="display:block;"/>
                    </td>
                    <td align="left" valign="center" bgcolor="#0a9fda" style="padding: 0 10px;" width="220" height="35">
                        <a href="http://img03.en25.com/EloquaImages/clients/SeagateCSS/{87374fad-7bdb-478e-a8e0-7b50f37e1aaf}_btnDownload.png" style="color: #FFF; font-size: 14px; font-family: Arial; text-decoration: none; text-align: center;">CLICK HERE TO LEARN MORE</a>
                    </td>
                    <td align="left"  width="6">
                        <img src="images/right-button-corner.png" style="display:block;" height="35"/>
                    </td>
                </tr>
            </table>

如果搞不定，我就放弃，用单图。非常感谢任何输入！

Answer 1

我会尝试以下方法。

在左侧按钮图片上尝试 align="right"：

<td align="right" width="6" height="35">
    <img src="images/left-button-corner.png" style="display:block;"/>
</td>

Answer 2

关于身高问题

中间td的高度为内容高度（本例为line-height）+padding-top+padding-bottom.

您可以删除 padding 声明以及 valign 和 width 属性以使文本垂直居中对齐并且您的按钮将水平缩放（无间断）。考虑到您将固定高度值编码为 35px，我认为这是个不错的选择。

中间例子`<td>`:

<td align="center" bgcolor="#0a9fda" style="height: 35px;" height="35">
    <a href="http://example.com" style="color: #FFF; font-size: 14px;
                                        font-family: Arial; text-decoration: none;">
      CLICK HERE TO LEARN MORE</a>
</td>

补充说明

您可以使用   实体控制号召性用语文本的中断方式。例如，如果 td width 不足以容纳一行中的文本，CLICK HERE TO LEARN MORE 将在 "HERE" 之后换行。
图像应具有 border: none 内联样式以防止出现不受控制的间隙。
另请注意，valign 属性值 center 不正确。它的值可以是 top、bottom 或默认值 middle。
您的代码存在更多问题。使用一些工具验证您的代码，例如 http://validator.w3.org/.

无法让这些元素在 Microsoft Outlook 中完美对齐且高度相同

Can't get these elements to be perfectly aligned and equally heighted in Microsoft Outlook

html

css

email

outlook

html-email

中间例子`<td>`:

补充说明

无法让这些元素在 Microsoft Outlook 中完美对齐且高度相同

Can't get these elements to be perfectly aligned and equally heighted in Microsoft Outlook

html

css

email

outlook

html-email

中间例子<td>:

补充说明

中间例子`<td>`: