Outlook 不尊重我的 "button" 背景颜色

Question

我有一个电子邮件的内容块在 Outlook 中无法正常工作。该块还需要在移动设备上工作，在 browser/desktop:

中应如下所示

.

除了 Outlook，这在所有浏览器中看起来都很完美。在 Outlook 中，它从按钮中删除了整个白色背景颜色（它实际上将其减少到文本内容）并且看起来非常糟糕：

这是我的盒子代码：

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
    <td align="center">
        <table bgcolor="#f5f5f5" border="0" cellpadding="0" cellspacing="0" class="w-full" width="640">
            <tr>
                <td width="20"> &nbsp;</td>
                <td align="center">
                    <table border="0" cellpadding="0" cellspacing="0" dir="ltr" width="100%">
                        <tr>
                            <td class="full" dir="ltr" valign="top" width="50%">
                                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                    <!--TABLE WITH IMAGE PART-->
                                    <tr>
                                        <td height="15" style="font-size: 1px; line-height: 1px;"> &nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td align="center"> <img src="http://placehold.it/170x170" style="display: block; border: 0;" width="170"></td>
                                    </tr>
                                    <tr>
                                        <td height="15" style="font-size: 1px; line-height: 1px;"> &nbsp;</td>
                                    </tr>
                                </table>
                            </td>
                            <td class="full" dir="ltr" valign="top" width="50%">
                                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                    <!--TABLE WITH TEXT AND TITLE PART-->
                                    <tr>
                                        <td style="font-size: 1px; line-height: 1px;" width="20"> &nbsp;</td>
                                        <td height="15" style="font-size: 1px; line-height: 1px;"> &nbsp;</td>
                                        <td style="font-size: 1px; line-height: 1px;" width="20"> &nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td width="20"> &nbsp;</td>
                                        <td align="left" class="font-22c" style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #7e828c; font-size: 20px; text-transform: uppercase;"> Lorem ipsum dolor</td>
                                        <td width="20"> &nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td width="20"> &nbsp;</td>
                                        <td height="20"> &nbsp;</td>
                                        <td width="20"> &nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td width="20"> &nbsp;</td>
                                        <td align="left" class="font-16c" style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #7e828c; font-size: 16px; line-height: 20px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                        <td width="20"> &nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td width="20"> &nbsp;</td>
                                        <td height="20"> &nbsp;</td>
                                        <td width="20"> &nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td width="20"> &nbsp;</td>
                                        <td class="cta" bgcolor="" width="" style="-webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border: 0px;font-family: Century Gothic; padding-top: 0px; padding-bottom:0px; font-weight:;"> <a class="cta" href="http://www.example.com" style="padding: 10px; width:150px; display: block;text-decoration: none; border:0 ; text-align: center;font-weight: bold; font-size: 14px; font-family: Century Gothic, Helvetica, Arial, sans-serif; color: #8b8b93; background: #ffffff; border: 1px solid #8b8b93; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; line-height:30px;">LORUM IPSUM</a> </td>
                                        <td width="20"> &nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td style="font-size: 1px; line-height: 1px;" width="20"> &nbsp;</td>
                                        <td height="15" style="font-size: 1px; line-height: 1px;"> &nbsp;</td>
                                        <td style="font-size: 1px; line-height: 1px;" width="20"> &nbsp;</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
                <td width="20"> &nbsp;</td>
            </tr>
        </table>
    </td>
</tr>

class CTA 如下：

cta {
        margin: auto;
        display: inline-block;
        background:#ffffff !important;

    }
    /* BUTTON STYLES */

    cta {
        padding: 15px 15px;
        width: 150px;
        font-family: 'AvantGarde-demibold', 'Century Gothic', 'Arial Bold', Arial, sans-serif !important;
        font-size: 14px;
        font-weight: bold;
        color: #8b8b93;
        background: #ffffff !important;
        border: 1px solid #8b8b93;
        font-weight: bold;
        align-content: center;
    }

Answer 1

老实说，我能够让 outlook HTML 看起来像我想要的方式的唯一方法是使用大致 HTML2 标准标签和属性手动生成 HTML并且根本不使用 CSS。一些 CSS 渲染，但它真的很成功或失败。

所以我认为直接将 background-color 设置为您的 Html tag 比在您的 css 文件中更好

Answer 2

不幸的是，要使按钮在 Outlook 中显示良好并可点击，它需要的代码多得多。像这样的东西应该可以解决问题（除非你想做 :hover 效果，否则 <style> 中不需要 CSS：

<!-- Button : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td style="border-radius: 3px; background: #FFFFFF; text-align: center;">
            <a href="http://www.google.com" style="background: #FFFFFF; padding: 15px; border: 1px solid #8b8b93; font-family: 'AvantGarde-demibold', 'Century Gothic', 'Arial Bold', Arial, font-size: 14px; line-height: 1.1; text-align: center; text-decoration: none; display: block; font-weight: bold;">
                <span style="color:#8b8b93;">A Button</span>
            </a>
        </td>
    </tr>
</table>
<!-- Button : END -->

Outlook 不尊重我的 "button" 背景颜色

Outlook is not respecting my "button" background color

html

css

email

outlook

html-email