Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法


Posted in Javascript onDecember 06, 2010

今天又回顾了一下这个插件,然后发现它在IE6下面工作的时候,显示起来是不正常的,tip经常出现在很离谱的位置。问题还有,由于tip的显示效果没有用到任何图像,都是纯的CSS,所以里面用CSS实现的三角形在IE6下是无法工作的,会显示一块有色区域,很丑,所以我就想动手改它一下。先上一张对比图好了:

Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
js方面的代码肯定是没问题的,问题出CSS上,Colortip用的是position进行定位,在IE6下面可能存在着一点问题。而且由于IE6不支持border-color:transparent的属性,所以tip下面的三角形也有问题。下面修正它吧。
打开插件的colortip-1.0-jquery.css这个文件,在里面找到如下代码:

.pointyTip,.pointyTipShadow{ 
/* Setting a thick transparent border on a 0x0 div to create a triangle */ 
border:6px solid transparent; 
_border:6px solid #123456; /*指定一个特别的颜色值,为使用chroma滤镜作准备*/ 
bottom:-12px; 
height:0; 
left:50%; 
margin-left:-6px; 
position:absolute; 
width:0; 
font-size:0; /*IE下空标签会有一个高度,把font-size设为0可以清除这个高度*/ 
_filter:chroma(color=#123456); /*为IE6使用chroma滤镜将颜色#123456过滤成透明的*/ 
}

如果大家自行看一下代码的话,可能会发现我贴出来的代码和原来相比有点不同,但是我已经把注释写在里面了,应该可以理解吧。 下面继续:
.pointyTipShadow{ 
/* The shadow tip is 1px larger, so it acts as a border to the tip */ 
border-width:7px; 
bottom:-14px; 
_bottom:-15px; /*将小三角形的位置微调一下更准确*/ 
margin-left:-7px; 
} 
.colorTipContainer{ 
position:relative; 
text-decoration:none !important; 
_zoom:1; /*不知道为什么,这里加上zoom:1后IE6下使用left:50%才能得到正确的位置,难道内联的元素没有layout?无法准确表达……*/ 
}

好了,到这里就修正完毕了,在我的机器上,用IEtester和VMware虚拟机的XP+IE6都测试通过,你也可以试试效果。有任何问题可以向我反馈,我能改则改。代码好理解,不能理解的直接用插件就行了。

插件网站 | 原版DEMO | 改后DEMO | 修正后的插件下载

再补充一句,原版和改后的DEMO在高级浏览器里面的效果是一样的,没区别,但是用IE6试试就知道了。希望我做的这一点点微不足道的工作,为喜欢这款插件的朋友们带来方便,^_^
关于纯CSS的方法实现三角形的效果,可以参看Mr.Think的这篇文章,很详细很不错的技巧CSS技巧之圆角背景与三角形。

Javascript 相关文章推荐
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 #Javascript
js对象的构造和继承实现代码
Dec 05 #Javascript
收集的一些Array及String原型对象的扩展实现代码
Dec 05 #Javascript
script标签的 charset 属性使用说明
Dec 04 #Javascript
本地对象Array的原型扩展实现代码
Dec 04 #Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 #Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 #Javascript
You might like
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
js简单时间比较的方法
2016/08/02 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
python练习程序批量修改文件名
2014/01/16 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
给客户的道歉信
2014/01/13 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
副总经理任命书
2014/06/05 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
同学聚会邀请函
2015/01/30 职场文书
教师节感想
2015/08/11 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL