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声明。（所有其他样式都放在另一个块中）。我还必须使用条件标签将文本内容双倍地包裹在跨度中。仅举一个示例，说明使用自定义字体时@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。