当前位置: 首页 > 编程日记 > 正文

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

转载于:https://www.cnblogs.com/RitchieChen/archive/2013/01/10/2854218.html

相关文章:

创新工场有哪些失败项目?不要只看着成功

创新工场有哪些失败项目&#xff1f;不要只看着成功 李开复 &#xff0c;创新工场CEO回答&#xff1a;失败或碰到挑战的项目也不少。这里不点名&#xff0c;不谈细节&#xff0c;但是谈谈碰到什么挑战&#xff08;有些已经失败&#xff0c;有些还在努力&#xff09;&#xff1a…

彻底解决Linux索引节点(inode)占用率高的告警

今天邮箱里发现有一封某服务器inode使用率发生告警的邮件 登录到服务器上df -i查看&#xff0c;发现/路径下91%&#xff0c;磁盘使用率却不高&#xff0c;猜测可能是某个目录下的小文件过多&#xff0c;进而造成inode占用率过高&#xff0c;但不清楚根路径下各文件夹里的文件数…

镜像打包工具clonezilla

镜像打包工具clonezilla clonezilla 百度云盘链接&#xff1a;https://pan.baidu.com/s/1LOEPqNE9O0Z4QJmNExlgeA 提取码&#xff1a;zlso 使用方法&#xff1a; 1、将镜像直接烧入U盘 2、U盘启动

python数据分析设置_Python 数据分析系列之如何安装和设置 Python

由于人们用 Python 所做的事情不同&#xff0c;所以没有一个普适的 Python 及其插件包的安装方案&#xff0c;接下来我将详细介绍各个操作系统上 Python 科学计算环境部署。我推荐免费的 Anaconda 安装包&#xff0c;Anaconda 提供 Python 2.7 和 3.6 两个版本&#xff0c;以后…

javamail gmail

http://www.programfan.com/club/showpost.asp?id27614转载于:https://www.cnblogs.com/yqskj/archive/2013/01/11/2855715.html

robots.txt文件的解析及过滤

什么是robots.txt文件? robots.txt&#xff08;统一小写&#xff09;是一种存放于网站根目录下的ASCII编码的文本文件&#xff0c;它通常告诉网络搜索引擎的漫游器&#xff08;又称网络蜘蛛&#xff09;&#xff0c;此网站中的哪些内容是不能被搜索引擎的漫游器获取的&#xf…

CF949C Data Center Maintenance(建图+强联通分量)

题意 有 n 个信息中心&#xff0c;第 i 个信息中心要在第 ti 个小时维护&#xff0c;维护期间信息不能被获得。 每个用户的数据都有两份备份&#xff0c;第 i 个用户的数据放在信息中心 c(i,1) 和 c(i,2)。 现在要挑选一个尽量小的信息中心集合&#xff0c;使得将这个集合的维护…

fabric 启动peer_编写 Fabric 链码的一般准则

我相信智能合约(链码)是 Hyperledger Fabric 区块链网络的核心。正确开发链码可以真正发挥一个安全区块链的优势&#xff0c;反之则会带来灾难性的后果。在这篇文章里我不打算探讨 Hyperledger Fabric 链码设计的特定模式的好与坏&#xff0c;而是希望分享我在开发若干 Hyperle…

Qt pro文件下跨平台宏的使用(windows/linux 以及x86 和 arm的区分)

#Qt pro文件下跨平台宏的使用&#xff08;windows/linux 以及x86 和 arm的区分&#xff09; 在pro文件中添加&#xff1a; #仅在linux 系统下&#xff0c; 硬件平台无关的内容 unix{HEADERS \SOURCES \Manager.cpp \ }#arm64 的编译宏 contains(QMAKE_HOST.arch, aarch64){…

数论(一)——素数,GCD,LCM

这是一个数论系列&#xff1a;&#xff09; 一、素数 费马小定理 Theorem&#xff1a; 设 p 是一个素数,a 是一个整数且不是 p 的倍数,那么 很遗憾,费马小定理的逆定理是不成立的。对 a 2,满足的非素数 n 是存在的。 比如 n 341 11 31 对于整数 a,称满足的合数为以 a 为底的…

java自学 day1

1.数据类型 基本数据类型&#xff08;存放数据本身&#xff09; 分为数值型&#xff08;int&#xff0c;double等&#xff09; 字符型&#xff08;char&#xff09;布尔型&#xff08;boolean&#xff09; 引用数据类型&#xff08;存放数据的地址&#xff09;分为类&#xff0…

Qt下一行代码就可以使用的稳定易用的日志log类

Qt下一行代码就可以使用的稳定易用的日志类 此日志类是基于Qt 自带的 扩展的一个易用的日志类&#xff0c; 使用的是Qt自带的日志输出形式&#xff0c; 已长期运行在许多实际项目中&#xff0c;稳定可靠&#xff0c;而且跨平台&#xff0c; 在windows和linux 上都能稳定运行 …

apue读书笔记-第十二章

1 可重入&#xff0c;线程安全&#xff0c;异步信号安全之间的区别&#xff1f; 可重入&#xff1a;可以重复进入&#xff0c;不会引起问题&#xff08;这个概念最宽&#xff09; 线程安全&#xff1a;被多个线程使用时&#xff0c;不会出问题&#xff0c;也就是可以被多个进程…

取出url中的字符_如何在JavaScript中解析URL:例如主机名,路径名,查询,哈希?...

统一资源定位符&#xff08;缩写URL&#xff09;是对Web资源&#xff08;网页&#xff0c;图像&#xff0c;文件&#xff09;的引用。URL指定资源位置和检索资源的机制&#xff08;http&#xff0c;ftp&#xff0c;mailto&#xff09;。例如&#xff0c;这是此博客文章的URL&am…

SQL Server 2008中的Pivot和UnPivot

SQL Server 2008中SQL应用系列--目录索引 今天给新成员讲解PIVOT 和 UNPIVOT示例&#xff0c;顺便整理了一下其用法。这是自SQL Server 2005起提供的新功能。 官方示例&#xff1a;http://msdn.microsoft.com/zh-cn/library/ms177410%28vsql.105%29.aspx 首先看PIVOT示例&#…

leetcode python 032 识别最长合法括号

# 给定一个只包含字符&#xff08;和&#xff09;的字符串&#xff0c;# 找到最长的有效&#xff08;格式良好&#xff09;括号子字符串的长度。# 对于“&#xff08;&#xff08;&#xff09;”&#xff0c;最长的有效括号子串是“&#xff08;&#xff09;”&#xff0c;其长…

Android窗口管理服务WindowManagerService计算Activity窗口大小的过程分析

在Android系统中&#xff0c;Activity窗口的大小是由WindowManagerService服务来计算的。WindowManagerService服务会根据屏幕及其装饰区的大小来决定Activity窗口的大小。一个Activity窗口只有知道自己的大小之后&#xff0c;才能对它里面的UI元素进行测量、布局以及绘制。本文…

pcl需要注意的编译问题

pcl需要注意的编译问题 不要在头文件里 using namespace pcl 这会导致编译错误,而且根本分析不到错误在哪 不要在编译选项 里加 -marchnative 这个是让编译器根据你当前的cpu类型进行特定的编译优化, 例如 set( CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -stdc11 -march…

linux python版本_linux下更新Python版本并修改默认版本

linux下更新Python版本并修改默认版本&#xff0c;有需要的朋友可以参考下。很多情况下拿到的服务器python版本很低&#xff0c;需要自己动手更改默认python版本1、从官网下载python安装包(这个版本可以是任意版本3.3 2.7 2.6等等)wget http://python.org/ftp/python/2.7/Pytho…

基于HTML5的Google水下搜索

这次愚人节的时候&#xff0c;Google推出了水下搜索&#xff0c;当然&#xff0c;这只是一个愚人的小把戏&#xff0c;不过效果非常不错&#xff0c;进入页面后&#xff0c;第一眼是一个水面的效果&#xff0c;水下的鲨鱼在游来游去&#xff0c;然后Google logo和搜索框从水面上…

windows下rpc框架thrift的环境配置

windows下rpc框架thrift的环境配置 引用链接: https://www.cnblogs.com/49er/p/7193829.html 最近在弄windows下 的Facebook的rpc 框架 thrift , 网上东西看了很多, 但是大都不能一篇到位, 这里总结了一下, 也记一下自己遇到的问题和解决的方法 这里把我在实际过程中遇见的问…

CentOS 6.3 安装 samba 共享

PHP环境在linux下&#xff0c;但是开发的时候用的是windows&#xff0c;于是我用了samba将linux的一个目录共享&#xff0c;然后在windows上做映射&#xff0c;这样就可以直接在windows下编辑linux上的文件了 首先&#xff0c;安装samba软件&#xff0c;我采用的是yum安装&…

微信小程序 长按图片不出现菜单_微信更新,新功能上了热搜

微信在推出新功能方面相当克制&#xff0c;但每一次总能引起全网关注。昨天&#xff0c;微信又因为一个小功能的改进再次上了热搜&#xff0c;在安卓最新的 7.0.17 版本当中&#xff0c;微信取消了两分钟内删除功能。在新版微信中&#xff0c;发出的消息在两分钟内只有撤回功能…

windows下配置java环境jdk

Windows系统下搭建java的开发环境和配置环境变量 具体步骤打开链接地址&#xff1a;https://www.cnblogs.com/lijuntao/p/6694483.html转载于:https://www.cnblogs.com/ccw869476711/p/9401468.html

mysql 分区_搞懂MySQL分区

一.InnoDB逻辑存储结构首先要先介绍一下InnoDB逻辑存储结构和区的概念&#xff0c;它的所有数据都被逻辑地存放在表空间&#xff0c;表空间又由段&#xff0c;区&#xff0c;页组成。段段就是上图的segment区域&#xff0c;常见的段有数据段、索引段、回滚段等&#xff0c;在In…

apt Could not get lock /var/lib/dpkg/lock 解决方案

apt Could not get lock /var/lib/dpkg/lock 解决方案 删除锁定文件 sudo rm /var/lib/dpkg/lock

oracle创建DBLink连接

1.创建dblink的第一种方式&#xff0c;是在本地数据库tnsnames.ora文件中配置了要远程访问的数据库。tnsnames.ora文件在你安装oracle客户端安装文件里 如&#xff1a;(E:\oracle\product\10.2.0\db_1\NETWORK\ADMIN) 创建远程连接&#xff1a; INT (DESCRIPTION (ADDRES…

理解oracle中连接和会话

理解oracle中连接和会话1. 概念不同&#xff1a;概念不同&#xff1a; 连接是指物理的网络连接。 在已建立的连接上&#xff0c;建立客户端与oracle的会话&#xff0c;以后客户端与oracle的交互都在一个会话环境中进行。 2. 关系是多对多&#xff1a; 一个连接上可以建立0个…

ActiveMQ消息存储持久化

转https://www.cnblogs.com/xinhuaxuan/p/6128380.html https://blog.csdn.net/lr131425/article/details/68064914 为了避免意外宕机以后丢失信息&#xff0c;需要做到重启后可以恢复消息队列&#xff0c;消息系统一般都会采用持久化机制。 就是在发送者将消息发送出去后&…

python 非_Python函数的非固定参数

一、概述在原来的文章中我已经写了&#xff0c;位置参数和关键字参数&#xff0c;下面我们来谈谈默认参数和参数组二、默认参数默认参数指的是&#xff0c;我们在传参之前&#xff0c;先给参数制定一个默认的值。当我们调用函数时&#xff0c;默认参数是非必须传递的。默认参数…