Solutions to VML display problems in IE8

Recently, I am maintaining a website that uses VML to draw curves. The browsing effect varies with IE, especially in IE8. The following is an inexplicable style display problem:

1. The curve is invisible! In ie9 or IE7, the curve is normally drawn, but in IE8, the coordinate axes and curves are not seen.

2. Curve offset! In ie9 or IE7, the curve position is normal, but in IE8, the curve is interrupted and offset.

3. Overlapping curves! That is, on a horizontal line, multiple curves (or other VML objects) are drawn or displayed together.

I was not familiar with VML and made minor changes. I found that VML is indeed incompatible with ie8. Ie9 installed on the local machine. None of the above three problems exist. However, the IE version on the client machine is different, and the headache is that the XP and Windows 2003 operating systems used by many users cannot be upgraded to ie9. There is no way to solve it. Windows 2003 + IE8 is installed on the virtual machine, and ietester + debugbar is used for debugging and analysis.

FirstThe problem of invisible curves and offsets is that the Group Object in VML does not specify its top, and its position attribute is not specified in the <style> declaration. When set

<Style>
V \: * {behavior: URL (# default # VML );Position: absolute;}
</Style>

Its "position" is "absolute", and the VML coordinates and curves have been displayed. However, you must specify the top 0 PX of the group object to display it correctly!

SecondThe Analysis of debugbar results from inaccurate top values of VML objects (such as line and rect. This is weird. In IE8 and ie9, the source code obtained through "View-> source code" is exactly the same! However, after ietester to view the "sorted source code", some of them are inconsistent! That is, in the object location, top and height are different! The curve shown on IE8 is hashed in the upper half of the coordinate area, and its top value is different from that in ie9. In IE8, the value is always displayed

"Top: 1342177.27px"

The top value in ie9 is significantly greater than this value. Later, after Query [2], I learned that the original IE8 values greater than this value are changed to this value, that is, they cannot be greater1342177.27px!

The cause of the problem is found, because in the process of drawing a curve, in order to facilitate control and display, the transmitted data is scaled up proportionally. When the property of the points to be drawn is greater1342177.27pxIE8 is set1342177.27px, Resulting in overlapping display and offset. Therefore, you only need to zoom in to a certain degree or scale down the data in a certain proportion. I used the judgment on the relevant property values. If the value is greater1342177.27pxAll related data is reduced by 10 times.

Solve the problem!

Summary:

It took three days to solve the problem. This problem was also encountered by other members of the project team. At the moment, no solution was found to fix this defect. It is only now that IE8 has a relatively large number of hosts (another major reason is that we also use SVG, which is not only satisfactory in IE6 and IE7! IE is really good !), The problem is too frequent and has to be solved. However, it is too laborious to solve the problems caused by such upgrades by Microsoft. In the past, there was also a problem with Silverlight incompatibility. It took only a few days to find out that the problem was originally caused by. NET Framework 4.5.

The process of solving the problem is also a process of suffering and harvest. The problem is that the source code in IE8 and ie9 is consistent, but the source code after IE is compiled is inconsistent, because how to parse HTML and execute JavaScript is the work of the IE kernel, I cannot allow IE8 to be greater1342177.27pxThe value "Do not touch your hands and feet", but in the process of solving the problem, it is also a way to find and solve the problem.Under what circumstances would you think of entering "1342177.27" in the Google search box!

In addition, none of the three suggestions mentioned in [1] can be met, such as, and, but not verified!

References

[1] applying VML in wellioms. IE8.

[2] situ zhengmei. the browser limits the maximum values of width and height.