现在位置首页 / 项目实战 /正文

echarts在IE7 IE8下图表上的文字出现闪烁问题的解决办法和原因

作者: IT小兵 | 2014年5月7日| 热度:℃ | 评论: |参与:

昨天在echarts群(欢迎加入:Jquery插件交流 346717337  )里讨论echarts的问题。有个同学提出来一个:

 你们又遇到页面在IE7,8上显示时 图表上的文字会一闪一闪的? 比如bar上面柱子的数值 ?


这个问题我们的建议是如果是完全按照官方demo来做的,那还是肯定有一些地方不一样。

比如,如果你使用的是Visual Studio 之类的IDE的话,你新建的页面会自动添加一些结构进去的。

如:下面这是Visual Studio2013产生的标准的html代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
</body>
</html>

言归正传。最终网友按照demo一步一步的修改,最终定位问题是:

问题出在DOCTYPE上 官网的例子都是<!DOCTYPE html>  我的页面里写的是<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   这点区别影响很大  我把官网下载下来的例子里的<!DOCTYPE html>替换后 例子也出现问题了


既然问题出在DOCTYPE。我们就来看看DOCTYPE是干什么的?

定义和用法

<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML,所以不需要引用 DTD。

提示:请始终向 HTML 文档添加 <!DOCTYPE> 声明,这样浏览器才能获知文档类型。

HTML 4.01 与 HTML5 之间的差异

在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种:

<!DOCTYPE html>

HTML4.01的三种声明:

HTML 4.01 Strict

该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">


总结:所谓的HTML5 DOCTYPE(即<!DOCTYPE HTML>),只是一种推荐的写法,并不是html5的一部分,doctype会影响浏览器的渲染模式,尤其是早期的浏览器。现代浏览器对于各种版本的html代码兼容性很好,基本已经不再根据不同的doctype类型来决定不同的渲染模式了(当然,写和不写DOCTYPE还是有区别的),而是改为用一种兼容的解析方法。<!DOCTYPE html>是HTML5的声明,主流的游览器中只有IE8及以下版本不支持,这样IE会进入Quirks模式。但之后的声明可以强制指定IE的呈现模式。所以就会出现闪烁等问题,很多问题还不一定暴露出来。


解决办法:使用echarts的页面需要声明HTML5 DOCTYPE <!DOCTYPE HTML>,如果需要更优雅的处理,可以判断浏览器的类型和版本。

提示用户进行升级或者切换到Chrome Firefox等浏览器进行浏览。


部分内容为网络资料,有问题请联系我或者登陆我的腾讯微博留言。

转发:IT分享 http://www.suchso.com 

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询