您的当前位置:首页正文

VML的兼容性解决方案

来源:花图问答

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

好在客户的工作环境只在 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>
显示效果图

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

参考: