VML的兼容性解决方案

作者: 错码匠 | 来源:发表于2017-09-28 00:09 被阅读297次

VML的兼容性解决方案
2018-04-25
Python3.7&Django1.11.15 兼容性问题
javascript之“事件绑定”
浏览器兼容性问题及解决方案(JS部分)
事件操作
2018-08-29
影评：《芳华》[if !vml]
孤独如风-第十七章
3-3 页面布局（总结）

最近维护单位的老项目，要求相关功能可以支持新的浏览器。由于是早期项目，在当初完成交付时都没有考虑过兼容问题，于是留下一些隐患，比如使用 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" />，同时还需要注意标签的命名空间的统一。