VML的兼容性解决方案

最近维护单位的老项目，要求相关功能可以支持新的浏览器。由于是早期项目，在当初完成交付时都没有考虑过兼容问题，于是留下一些隐患，比如使用 VML 绘制的审批流程图例在 IE8+ 没有显示。

Vector Markup Language 缩写 VML，一种用于绘制矢量图形的标记语言，它是微软自 IE5 以来单方面发布的一种矢量图方案，所以非IE内核的浏览器是无法使用的。在网页开发日趋规范的形势下已被 SVG 取代，在 IE9 推出时微软开始不赞成使用 VML，而在 IE10 发布后干脆放弃了 VML（详见 不再支持 VML）并建议迁移到 SVG。

好在客户的工作环境只在 IE 浏览器下，而我们知道 IE 每个版本都集成了上一版的内核，这让我们可以通过切换到特定渲染模式去满足 VML 的运行环境，使这些元素正常显示：

    
    


    
        
            oval
        
    

相较原先，改进后的代码多了样式引入 v\:* {behavior: url(#default#VML)} 和强制渲染声明 ，同时还需要注意标签的命名空间的统一。

显示效果图

现在这段代码所声明的图例在 IE11 下也可以正常显示。至于 IE 之外的浏览器那就不得不借助 SVG 做代码重构了。另外通过 JS 动态添加 VML 元素也需要做些调整，由于这涉及到 DOM 操作，于是就不是本文力求简明扼要的笔记风格可以完全涵盖的范围了。

参考：

• Vector Markup Language (VML)
• Changes in VML for IE8, or "what feature can the IE dev team break for you today?"