VML绘制的图形在IE8下不见了

最新推荐文章于 2021-12-29 20:46:22 发布

sho_ko

最新推荐文章于 2021-12-29 20:46:22 发布

阅读量189

点赞数

本文详细探讨了IE8环境下VML图形显示消失的现象，通过分析IE8对VML支持的变化，提出了三个关键解决策略：避免使用全局选择符对VML元素添加样式、为非0属性添加单位以及避免使用setAttribute方法。并解释了这些改变导致VML在IE8中无法正常显示的原因。

摘要由CSDN通过智能技术生成

最近发现使用VML绘制的图形在IE8下不见了，需要将IE8的Document Mode改为IE7 Standard才可以，或者你需要在页面添加这个信息：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

修改IE的Document Mode是用户行为，开发者不能干预，使用meta头信息也只能针对那些可完全控制的页面，对于像API开发包一类的东西，就不能指望使用者在自己的页面添加这个meta了。那还有办法解决吗？请看下面内容。

IE8对VML的支持发生了哪些变化，导致其消失了呢？网上查了一些资料，只要注意以下三点就可以让VML重新在IE8中展现出来。

1. 不要使用全局选择符*对VML元素添加样式。
v/:*{behavior:url(#default#VML)} 需要修改为：
v/:shape{b ehavior:url(#default#VML)}
你使用了哪些VML元素就要添加相应的样式规则

2. 为VML元素样式的非0属性添加单位。
在IE8之前，浏览器会为没有单位的属性添加默认单位，IE8就不行了。
<v:shape style=" position:absolute; z-index:1;left:0;width:1;top:0;height:1" filled="t" fillcolor="white" > 需要修改为：
<v:shape style=" position:absolute; z-index:1;left:0;width:1px;top:0;height:1px" filled="t" fillcolor="white" >

3. 不要使用setAttribute为VML对象添加属性。
rect.setAttribute("fillcolor", "black") 需要修改为：
rect.fillcolor = "black";

参考：
1. Changes in VML for IE8, or "what feature can the IE dev team break for you today?"
2. The VML changes in IE8