【问题标题】：Outlook on WIndows 10 - mail stylingWindows 10 上的 Outlook - 邮件样式
【发布时间】：2017-11-17 14:35:19
【问题描述】：

按钮的背景颜色样式在 Outlook 电子邮件客户端上不起作用，但它在其他客户端和浏览器中正常工作（甚至在 MacOS 上的 Outlook 上也是如此）。

不工作：

应该是什么样子：

代码：

<td align="right" valign="center" style="margin: 0; padding: 20px;" width="200">
    <a href="{{ company['url'] }}">
        <button style="color: #ffffff; background-color: #00A4FF; font-size: 12px;
            cursor: pointer; border: none; font-weight: bold; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px;" >
            {{ translation._('company.view.emailTemplatesCompaniesOfUser.go') }}
        </button>
    </a>
</td>

【问题讨论】：

我认为锚点内的按钮在 HTML 4 中曾经是无效的 HTML。不确定它是否会起作用，但你可以尝试用 span 替换 button 元素保持相同的样式?不过，您可能需要添加 display:inline-block。
背景可见，但其他样式（如填充）不起作用。
那是因为inline-block 不受支持。我会做一点挖掘。
删除 inline-block 不会改变任何东西，别担心 :)
嗯...看起来我用于电子邮件的框架在锚点上使用了内联块。也许您可以尝试将上述代码应用到按钮的填充，但将background 和color 添加到锚标记？

标签： javascript html css frontend mailing

【解决方案1】：

我认为，如果您只能使用元素并摆脱元素可能会对您的解决方案有所帮助。您可以为该元素的表格赋予背景颜色。

    <table  align="center" border="0"  width="100" style="border-collapse:collapse;border:0;padding:0px;margin:0px;width:300px;height:50px;border-radius: 3px;background: #00A4FF;text-align:center;">
           
           <tr>
    <td align="right" valign="center" style="margin: 0; padding: 20px;" width="200">
     <p style="padding:0px;margin:0px;font-family:Arial,Helvetica;font-size:12px;font-style:normal;font-weight:normal;text-align:center;line-height:100%;letter-spacing:normal;color:#ffffff;">
 <a href="{{ company['url'] }}" style="color:#ffffff;border:0px;outline:none;text-decoration:none;display:block;width:100%;height:20px">

{{ translation._('company.view.emailTemplatesCompaniesOfUser.go') }}

                </a>
               </p>   
            </td>
        </tr>
    
    </table>

【讨论】：