如何仅在电子邮件模板中针对 outlook 的样式？

Question

有一个table这样的：

对于 outlook，应该是 width:60%

但对于其他客户端，因为我想处理移动端，所以宽度:100% 和 max-width:650px

问题是，outlook 在以下语法中得到 width:100%

<table class="table" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="60%" style="max-width:650px; width:100%; border-collapse: collapse; margin: auto;">

如何区分outlook和其他邮件客户端，目前试过这样：

<![if !mso]> 
                    <table class="table" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="60%" style="border-collapse: collapse; margin: auto;">
                    <![else]>
                    <table class="table" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="max-width:650px; width:100%; border-collapse: collapse; margin: auto;">
                    <![endif]>

但它不起作用，在 outlook 中仍然获得 100% 宽度

感谢您的帮助。

Answer 1

简单的解决方案是使用 MSO 条件为 outlook 创建定义的 table 大小。您在内联 CSS 中也有 "width:100%"，它覆盖了 html 属性中的 width="60%"。

请参阅下面的建议代码：

    <!--[if mso]>
     <style>
        .table {width:100% !important;}
      </style>
                        <table width="650" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="border-collapse: collapse; margin: auto;">
                        <tr>
                        <td>
    <![endif]-->
                        <table class="table" width="60%" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="max-width:650px; border-collapse: collapse; margin: auto;">....</table>
<!--[if MSO]>
       </td></tr></table>
<![endif]-->

这应该适用于所有 Outlook，table 不会超过 650px，因为在该宽度创建包含 table - 并且它会将实际 table 更改为 100填充这 650px 的 % 宽度 table.

如何仅在电子邮件模板中针对 outlook 的样式？

How to target the style for outlook only in email template?

html

css

email

fonts

html-email