Question

如果你像我一样，在阅读本文结束时，你的眼睛会抽搐。我不怪你。

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

使用尽可能少的图像
尽可能多地使用“花哨的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渲染“ - ＆gt;”在非展望内容之前。其他浏览器没有这个问题。

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遇到了一些问题。我不仅要使用条件围绕它自己的样式块来隐藏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”字体声明置于内联样式中，但这显然不起作用，所以我不得不将我的内容双重包装到两个带有样式声明的span中。内部条件是非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。

HTML电子邮件：mso条件的回退？

4 个答案: