最近维护单位的老项目,要求相关功能可以支持新的浏览器。由于是早期项目,在当初完成交付时都没有考虑过兼容问题,于是留下一些隐患,比如使用 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 操作,于是就不是本文力求简明扼要的笔记风格可以完全涵盖的范围了。
参考: