HTML 电子邮件：mso 条件的后备？

Question

如果你像我一样，读完这篇文章你的眼睛会抽搐。我不怪你。

我们的客户要求我们开发一个响应式 HTML 电子邮件模板，有两个规范：

1. 使用尽可能少的图片
2. 尽可能多地使用“启用 css 的精美功能”。大多数情况下，这只意味着盒子上的圆角。

这个问题专门关于执行圆角。 Gmail 和 Apple 支持 CSS 圆角，Outlook 需要矢量图形。对于其余平台，它们可以使用方形边缘。

以下是我们检测和执行 Outlook 的方式：

<!--[if mso]><v:shape>...</v:shape><![endif]-->

即使回到 Outlook 2000 也能像魅力一样工作。问题是，我不知道如何创建回退。直觉是这样说的：

<!--[if !mso]>...<![endif]-->

但它只是被大多数其他电子邮件客户端作为评论完全忽略，然后盒子中完全没有角落。我问你们，SO 社区的优秀成员：是否可以为所有平台部署标记除了 MSO？也许有一个我没有考虑过的更聪明的方法来完成这个？还是电子邮件 HTML 仍然太石器时代而无法尝试这样的事情？

Answer 1

费了好大劲才找到解决办法。而不是这个：

<!--[if mso]><v:shape>...</v:shape><![endif]-->
<!--[if !mso]>[fallback goes here]<![endif]-->

这很好用：

<!--[if mso]>
    <v:shape>...</v:shape>
    <div style="width:0px; height:0px; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
<![endif]-->

    [fallback goes here]

<!--[if mso]></div><![endif]-->

它所做的只是在 MSO 中将回退包装在一个不可见的 div 中，并改为部署矢量解决方案。

希望这对未来的人有所帮助！

Answer 2

这也可以，不需要隐藏的 div。

 <!--[if mso]>
     Outlook content
 <![endif]-->
 <!--[if !mso]> <!---->
     Non-outlook content
 <!-- <![endif]-->

诀窍是在第 4 行关闭评论之前重新打开评论 -

<!---->

位。如果您不这样做，IE 会在非 Outlook 内容之前呈现“-->”。其他浏览器没有这个问题。

Answer 3

虽然 CodeMoose 的解决方案确实隐藏了回退；在我的测试中，它为后备 的位置留出了空间（我读到 Outlook 不会呈现溢出：隐藏）。这对我的布局不起作用，因为它会影响其他元素。

经过大量搜索，我发现如果您对 CodeMoose 的建议进行小幅修改，它将隐藏您的后备并且不会添加任何不必要的间距：

<!--[if mso]>
<v:shape>...</v:shape>
<![endif]-->

<[fallback goes here] style="mso-hide:all;">

通过添加“mso-hide:all;”根据您的回退的实际样式，Outlook 将折叠并忽略您的回退代码，从而保留您的布局。在可以处理您使用 VML 尝试复制的复杂 CSS 的客户端（例如 Outlook for Mac 中）中，您的回退仍然可以正常显示。

Answer 4

在使用带有@font-face 声明的自定义字体时，Outlook 回退到 Times New Roman 时遇到了一些问题。我不仅必须使用它自己的样式块周围的条件从 Outlook 中隐藏 @font-face 声明。 （所有其他样式放在另一个块中）。我还必须使用条件标签将我的文本内容双重包装在 span 中。仅举一个示例，说明@CodeMoose（上）发布的这种技术在使用自定义字体时如何工作。

<!--[if !mso]><!-->
    <style type="text/css">    
        @font-face {
            font-family: 'Museo100';
            src: url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.eot');
            src: url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.eot?#iefix') format('embedded-opentype'),
                 url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.woff') format('woff'),
                 url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.ttf') format('truetype'),
                 url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.svg#museo100') format('svg');
            font-weight: normal;
            font-style: normal;
        }
<!--<![endif]-->

首先，我尝试将“Museo300”字体声明的条件放在内联样式中，但这显然不起作用，所以我不得不将我的内容双重包装成两个带有样式声明的跨度。内部是非 MSO 的条件。

<span style="color: #00B2EB; font-family: arial, sans-serif; font-size: 14px; line-height: 19px; font-weight: normal;">
    <!--[if !mso]><!--><span style="font-family: Museo100;"><!--<![endif]-->
    Text goes here, shown in Museo in Apple mail while this method shows in Arial in Outlook (and others that do not support custom fonts  
    <!--[if !mso]><!--></span><!--<![endif]-->
</span> 

这非常适合让 Outlook 以 Arial 显示文本，而 Apple 邮件将以 Museo 字体显示文本。其他客户端（如 Android 上的邮件）具有正常的回退行为，仅显示 Arial。