IE8下的VML显示问题解决方案

最近在维护一个使用VML画曲线的网站，在不同的IE下浏览效果不一样，特别是在IE8下，出现莫名其妙的样式显示问题：

1.曲线不可见！在IE9或IE7下，曲线正常绘制，但是在IE8下，不见坐标轴和曲线。

2.曲线位置偏移！在IE9或IE7下，曲线位置正常，但是在IE8下，曲线出现中断、偏移的情况。

3.曲线重叠！即在某一个水平线上，多条曲线（或其它VML对象）扎堆绘制或显示在一起。

本来对VML并不熟悉，以前的修改也是小打小闹，在网上找了下，也发现VML在IE8下的确是有不兼容的现象^[1]。本机安装的IE9，以上三个问题都不存在。不过客户机器上的IE版本不一，比较头疼的还有许多用户使用的XP和Windows 2003的操作系统，无法升级到IE9。没办法只得想法解决。在虚拟机里安装了Windows 2003+IE8，并使用IETester+DebugBar一起调试分析。

首先，对于曲线不可见以及偏移的问题，是由于VML中的Group对象并没有指定其top，且在<style>声明中并没有指定其position属性。当设置

<style>
v\:*{behavior:url(#default#VML);position:absolute;}
</style>

其“position”为“absolute”，VML坐标和曲线已经显示出来，不过需要指定Group对象的top为0px才可以正确显示！

其次，对于曲线位置偏移与曲线重叠的问题，经过DebugBar的分析，是由于VML对象（Line、Rect等）的Top值不准确而产生的。此处比较怪异，在IE8和IE9下，通过“查看->源代码”得到的源代码是完全一致的！但是经过IETester查看“整理后的源代码”，则部分不一致！即在对象的位置上，top、height上不一样！在IE8上显示的曲线扎堆显示在坐标区域的上半部分，其TOP值与IE9下值不一样。IE8下，其值一直显示为

“TOP:1342177.27px”

而IE9下的TOP值则明显大于此值。后来经过查询^[2]才知道，原来IE8下对大于它的值都更改为此值，即不能大于1342177.27px ！

此处问题原因找到了，因为在画曲线的过程中，为了便于控制和展示，将传递过来的数据进行了一定比例的放大，当要绘制的点相关属性大于1342177.27px 后，IE8强制设定为1342177.27px ，从而造成了显示重叠和偏移。因此只需要将放大比例缩小到一定程度或将数据按一定比例缩小就可以了。我使用了对其相关属性值的判断，如果大于1342177.27px ，则所有相关数据都缩小10倍。

问题解决！

总结:

解决这个问题，花费了整整三天的时间。此前项目组其他成员使用的时候也碰到这个问题，一时也没有找到解决办法，将这个缺陷留存起了。只是现在IE8的相对装机量太多（另外一个主要原因是我们还使用了SVG，它在IE6和IE7下呈现也不仅如意！IE真操蛋！），问题过于频繁，不得不解决。不过，对于微软的这种升级带来的问题，有的时候解决起来，真是太费力费神了。以前也有过Silverlight不兼容的问题，找了半天才发现原来是.NET Framework 4.5的问题。

解决问题的过程也是一个煎熬+收获的过程。煎熬是在IE8与IE9下查看源代码都一致但IE整理后的源代码不一致的时候，因为怎么解析html和执行javascript是IE内核的工作，我无法让IE8对大于1342177.27px 的值“别乱动手脚”，但是在问题的解决过程中，查找和解决问题的方法也是一种收获。何种情况下会想到在Google的搜索框里输入“1342177.27”呢！

此外，对于参考[1]中的三个建议，也不见得全部都不行，比如第1点、第2点，第3点则未验证！

参考文献

[1]wellioms.IE8中应用VML.

[2]司徒正美.浏览器对width与height的最大值限制.