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的最大值限制.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM