Outlook 2010 - 由 div 制成的按钮，在表格单元格中有填充？

Question

我正在尝试在表格单元格中为带有左右空格的电子邮件创建一个简单的蓝色按钮。我所做的一切似乎都不起作用（你可以看到那里有些臃肿），我有一个正确宽度的蓝色矩形，但它不会在顶部和底部添加空间。

在 Gmail 中看起来不错，但我遇到了 Outlook 2010 的问题。有没有其他方法可以做到这一点？

我希望文本在蓝色矩形内居中 (v+h)，顶部和底部有填充。

在 Outlook 2010 中查看的 2 个单元格中并排的 2 个按钮的图像

<tr>
<td>
    <center>
            <div height="25px" style="background-color:#1d70b7; padding:5px; width:60%; margin-bottom:20px; margin-right:20px; margin-left:20px; max-width:250px; line-height:25px; height:25px;" width="250px">
                <p style="line-height:25px;"><font color="#FFFFFF">DNB</font></p>
                </div>
        </center>
    </td>
    <td>
        <center>
            <div height="25px" style="background-color:#1d70b7; padding:5px; width:60%; margin-bottom:20px; margin-right:20px; margin-left:20px; max-width:250px; line-height:25px; height:25px;" width="250px">
                <p style="line-height:25px;"><font color="#FFFFFF">FNB</font></p>
            </div>
        </center>
</td>

提前致谢

Answer 1

我的按钮也有类似的问题。一个简单的技巧是使用边框，因为所有主要的邮件客户端都支持边框。只需将“border XXpx solid #color”添加到 a-tag 即可伪造您的填充。如果你不使用超过 10px 的边框，它会很好用。

Answer 2

I answered a similar question here。长话短说，像这样的按钮需要比在具有良好盒子模型支持的网络/电子邮件客户端上更多的代码。可以在按钮的父级<td> 标记中使用padding（而不是margin）应用额外的间距。

<td align="center" style="padding: 15px 25px;">

    <!-- Button 1 : Begin -->
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto; display: inline-block;">
        <tr>
            <td style="border-radius: 4px; background: #1d70b7; text-align: center;">
                <a href="http://www.google.com" style="background: #1d70b7; border: 5px; solid #1d70b7; font-family: sans-serif; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; color: #ffffff; display: block; border-radius: 4px;">
                    DNB
                </a>
            </td>
        </tr>
    </table>
    <!-- Button 1 : END -->
</td>

<td align="center" style="padding: 15px 25px;">
    <!-- Button 2 : Begin -->
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto; display: inline-block;">
        <tr>
            <td style="border-radius: 4px; background: #1d70b7; text-align: center;">
                <a href="http://www.google.com" style="background: #1d70b7; border: 5px; solid #1d70b7; font-family: sans-serif; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; color: #ffffff; display: block; border-radius: 4px;">
                    FNB
                </a>
            </td>
        </tr>
    </table>
    <!-- Button 2 : END -->

</td>

---

这是少数类似技术之一，outlined on Litmus。

Answer 3

Campaign Monitor 制作了他们所谓的“防弹按钮制造商”

在这里：buttons.cm

现在我经常打电话来添加一些填充，但不要在实际的文本或按钮周围做，而是在一个包装 div 中做：

<div style="padding-top: 15px; padding-bottom: 15px;>
    <some button code>
</div>

而我们使用padding-top 和padding-bottom 的原因是因为一些客户不喜欢CSS 速记（安全总比抱歉好）。我希望这会有所帮助。