HTML 电子邮件:mso 有条件的回退? [英] HTML Emails: fallback for mso conditional?

问题描述

如果你和我一样，看完这篇你的眼睛会抽搐.我不怪你.

If you're like me, your eye will be twitching by the end of reading this. I don't blame you.

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

Our client has requested us to develop a responsive HTML email template, with two specifications:

1. 尽量少用图片
2. 尽可能多地使用支持 css 的花哨功能".大多数情况下，这只是指盒子上的圆角.

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

This question is specifically about executing the rounded corners. Gmail and Apple support CSS rounded corners, and Outlook requires vector graphics. For the remaining platforms, they're ok with using square edges.

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

Here's how we're detecting and executing outlook:

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

工作就像一个魅力，甚至回到 Outlook 2000.问题是，我不知道如何创建一个后备.直觉是这样说的:

Works like a charm, even back to Outlook 2000. The problem is, I can't figure out how to create a fallback. Intuition says this:

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

但它只是被大多数其他电子邮件客户端完全忽略为评论，然后盒子里的角落完全不见了.我问你，SO 社区的优秀成员:是否可以为所有平台部署标记除了 MSO?也许有一种更聪明的方法来实现这一点，我没有考虑过?或者电子邮件 HTML 仍然太陈旧，无法尝试这样的事情?

but it just gets ignored outright as a comment by most other email clients, and then corners are missing from the boxes altogether. I ask you, fine members of the SO community: is it possible to deploy markup for all platforms except MSO? Perhaps there's a more clever way to accomplish this that I haven't considered? Or is email HTML still too stone-age to attempt something like this?

推荐答案

绞尽脑汁找到了解决方案.而不是这样:

Found a solution after much brain-wracking. Instead of this:

<!--[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 中，并改为部署矢量解决方案.

All it does is wrap the fallback in an invisible div in MSO, and deploys the vector solution instead.

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

Hope this helps someone in the future!

这篇关于HTML 电子邮件:mso 有条件的回退?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！