当前位置：文江博客话题详情

如何让 VML 在标准模式下工作？

发布于 2024-09-26 13:05:58 字数 181 浏览 5 评论 0原文

我希望能够在标准模式而不是怪异模式下的页面渲染上使用 vml 对象。我发现答案的碎片散落在各处，但无法弄清楚。 Raphael 以某种方式完成了它，但我无法扭转它来弄清楚发生了什么。任何基本的工作示例都会很棒。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

や三分注定 2024-10-03 13:05:58

我想我已经弄清楚了。第 1 步是通过 javascript 导入 vml 命名空间。

document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', "#default#VML");

这使得一些随机 vml 样本可以在怪异模式下工作，但不能在标准模式下工作。关键是元素需要一个测量单位，如果未提供单位，怪异模式将假定为 px。此外，形状必须使用 position:absolute; 设置样式，尽管线条显然不需要这部分。

这是带有 2 个椭圆的示例。两个椭圆都会在怪异模式下渲染，但蓝色椭圆不会在标准模式下显示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
    <script>
        document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', "#default#VML");
    </script>
    <v:oval style="width: 100; height: 50" fillcolor="blue"></v:oval>
    <v:oval style="position: absolute; width: 100px; height: 50px" fillcolor="green"></v:oval>
</body>
</html>

I think I have it figured out. Step 1 is importing the vml namespace though javascript.

document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', "#default#VML");

This got some random vml samples to work in quirks mode but not standards. They key is that elements require a unit for measurements where quirks mode will assume px if a unit is not provided. Also shapes have to be styled with position:absolute; although lines apparently do not need this part.

Here's a sample with 2 ovals. Both ovals will render in quirks mode but the blue oval will not show in standards mode.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
    <script>
        document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', "#default#VML");
    </script>
    <v:oval style="width: 100; height: 50" fillcolor="blue"></v:oval>
    <v:oval style="position: absolute; width: 100px; height: 50px" fillcolor="green"></v:oval>
</body>
</html>

回复收藏 0 原文