最近维护单位的老项目，要求相关功能可以支持新的浏览器。由于是早期项目，在当初完成交付时都没有考虑过兼容问题，于是留下一些隐患，比如使用 VML 绘制的审批流程图例在 IE8+ 没有显示。
Vector Markup Language 缩写 VML，一种用于绘制矢量图形的标记语言，它是微软自 IE5 以来单方面发布的一种矢量图方案，所以非IE内核的浏览器是无法使用的。在网页开发日趋规范的形势下已被 SVG 取代，在 IE9 推出时微软开始不赞成使用 VML，而在 IE10 发布后干脆放弃了 VML（详见 不再支持 VML）并建议迁移到 SVG。
好在客户的工作环境只在 IE 浏览器下，而我们知道 IE 每个版本都集成了上一版的内核，这让我们可以通过切换到特定渲染模式去满足 VML 的运行环境，使这些元素正常显示：
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style>
v\:* {behavior: url(#default#VML)}
.oval {
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v">
<v:oval class="oval" fillcolor="red" class="oval">
oval
</v:oval>
</xml:namespace>
</body>
</html>
相较原先，改进后的代码多了样式引入 v\:* {behavior: url(#default#VML)} 和强制渲染声明 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />，同时还需要注意标签的命名空间的统一。
显示效果图
现在这段代码所声明的图例在 IE11 下也可以正常显示。至于 IE 之外的浏览器那就不得不借助 SVG 做代码重构了。另外通过 JS 动态添加 VML 元素也需要做些调整，由于这涉及到 DOM 操作，于是就不是本文力求简明扼要的笔记风格可以完全涵盖的范围了。
参考：
网友评论