Question

我有以下HTML：

<html>
    <table align="center" cellspacing="0" border="0" cellpadding="0" width="600"  style="text-align: center;">
        <tbody>
            <tr>
                <td valign="top" style="height:78px; width:528px">
                    <a href="Link" style="display:block; height:78px; width:528px; color: #2a3379; text-decoration: none !important; padding-top:32px; font-family:Arial; font-weight:bold; font-style:italic; border-radius:5px; font-size:40px; display:block; margin:0 auto; background-color:#B5E61D;">                                                     
                        Apply now
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</html>

在浏览器中显示如下：

问题是，当我将它作为HTML模板添加到电子邮件时，它在outlook中显示如下：

据我所知，我知道outlook不能很好地呈现HTML。我还读过不使用CSS并内联所有样式 - 但这没有用。

电子邮件需要响应，所以我不想使用图像。

我猜有一个特定的规则导致了这个问题。

之前有没有人遇到这个并找到了一个好的解决方案？

Answer 1

你已经将填充物放在A而不是td上，这就是你的问题。所以我已经改变了一点，让它工作。关于背景颜色和高度/宽度的一切都需要在TD而不是A.只有文本相关的样式应该在那里：）

<html>
    <table align="center" cellspacing="0" border="0" cellpadding="0" width="600"  style="text-align: center;">
        <tbody>
            <tr>
                <td align="center" valign="top" height="78" width="528" style="display:block; padding:32px 0px; display:block; background-color:#B5E61D; border-radius:5px;">
                    <a href="#" style="color: #2a3379; text-decoration: none !important;  font-family:Arial; font-weight:bold; font-style:italic; font-size:40px;">                                                     
                        Apply now
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</html>

请注意，请记住在outlooks中使用border-radius dosnt

Answer 2

尝试将此添加到您的头脑中：

<!--[if gte mso 9]>
  <style type="text/css" media="all">
     body {mso-line-height-rule: exactly;}
     tr {mso-line-height-rule: exactly;}
     td{mso-line-height-rule: exactly;}
  </style>
  <![endif]-->
  <!--[if gte mso 15]>
  <style type="text/css" media="all">
    body{font-size:0;line-height:0;mso-line-height-rule:exactly;}
    tr{font-size:0px;mso-line-height-alt:0px;mso-margin-top-alt:0px;mso-line-height-rule:exactly;}
    td{mso-line-height-rule:exactly;}
  </style>
  <![endif]-->

Outlook中的编码很奇怪，因为它使用Word引擎从2007年开始渲染html（不知道为什么）。

快速提示，如果您在Word中打开html文件，则可以预览相应Outlook中的内容。

编辑：注意到您的锚点链接只有背景颜色，请务必将其也包含在td中。

Answer 3

删除padding＆amp;添加line-height

<table align="center" cellspacing="0" border="0" cellpadding="0" width="600"  style="text-align: center;">
        <tbody>
            <tr>
                <td valign="top" style="width:528px">
                    <a href="Link" style="display:block; height:100px; line-height:100px;  width:528px; color: #2a3379; text-decoration: none !important; font-family:Arial; font-weight:bold; font-style:italic; border-radius:5px; font-size:40px; display:block; margin:0 auto; background-color:#B5E61D;">                                                     
                        Apply now
                    </a>
                </td>
            </tr>
        </tbody>

HTML未在展望

3 个答案: