Outlook HTML电子邮件：mso的回退条件？
如果你像我一样，读完这篇文章，你的眼睛会抽搐。我不怪你 我们的客户要求我们开发一个响应性HTML电子邮件模板，包含两个规范：Outlook HTML电子邮件：mso的回退条件？,outlook,gmail,html-email,vector-graphics,Outlook,Gmail,Html Email,Vector Graphics,如果你像我一样，读完这篇文章，你的眼睛会抽搐。我不怪你 我们的客户要求我们开发一个响应性HTML电子邮件模板，包含两个规范： 使用尽可能少的图像 使用尽可能多的“支持css的奇特功能”。大多数情况下，这只是指盒子上的圆角 这个问题是关于执行圆角的。Gmail和Apple支持CSS圆角，Outlook需要矢量图形。对于其余的平台，它们可以使用方形边缘 以下是我们检测和执行outlook的方式： <!--[if mso]><v:shape>...</v:shape>
<!--[if mso]><v:shape>...</v:shape><![endif]-->
<!--[if !mso]>...<![endif]-->
但它只是被大多数其他电子邮件客户端直接忽略为一条评论，然后盒子里的角就完全消失了。SO社区的优秀成员们，我问你们：除了MSO之外，是否可以为所有平台部署标记？也许有一个更聪明的方法来实现这一点，我还没有考虑？还是电子邮件HTML仍然太过时，无法尝试这样的事情？经过大量的脑力劳动，找到了一个解决方案。与此相反：
<!--[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]-->
[这里有退路]
希望这对将来的人有帮助 尽管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。当使用带有@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]-->
@字体{
字体系列：“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“）格式（'embedded-opentype'），
url（'http://www.somesite.nl/site/fonts/museo100-regular-webfont.woff“）格式（“woff”），
url（'http://www.somesite.nl/site/fonts/museo100-regular-webfont.ttf“）格式（'truetype'），
url（'http://www.somesite.nl/site/fonts/museo100-regular-webfont.svg#museo100格式（'svg'）；
字体大小：正常；
字体风格：普通；
}
<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>
文本显示在此处，在Apple mail中以Museo显示，而此方法在Outlook中以Arial显示（以及其他不支持自定义字体的方法）
这在让Outlook以Arial格式显示文本，而Apple mail将以字体Museo显示文本方面非常有效。其他客户端（如Android上的mail）有正常的回退行为，只显示Arial。这同样有效，不需要隐藏div
<!--[if mso]>
Outlook content
<![endif]-->
<!--[if !mso]> <!---->
Non-outlook content
<!-- <![endif]-->
非outlook内容
<!---->
位。如果您不这样做，IE将在非outlook内容之前呈现“->”。其他浏览器没有这个问题。我今天正在尝试此功能，因此获得了支持。希望它能工作。很高兴听到此消息！很高兴帮助=）谢谢！确实会伤脑筋；）不管出于什么原因，这对我来说都不管用，但我还是投了更高的票，因为这是一个非常有创意的解决方案。谢谢你的反馈！如果你仔细阅读我的答案，你会看到
mso-hide:all谢谢你的提示！我没有尝试，因为我手头没有Outlook'00和'11。我的方法是使用Outlook圆角的图像，然后使用媒体查询将它们剥离，目标是像素比率@media screen和（-webkit设备像素比率）、screen和（-moz设备像素比率）{-然后使用CSS恢复（3）-VML很好，但重复使用代码、对代码进行质量保证以及大致了解发生了什么都是有风险的和更困难的。我倾向于说这是可行的，另一个不可行。我使用了上面建议的代码片段，但仍然没有显示代码。您的代码显示了。谢谢！！