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 相关文章推荐
JavaScript 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 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 文件状态缓存带来的问题
2008/12/14 PHP
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
vue构建动态表单的方法示例
2018/09/22 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
详解python的几种标准输出重定向方式
2016/08/15 Python
代码分析Python地图坐标转换
2018/02/08 Python
Python 变量类型详解
2018/10/10 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
我的大学生活职业生涯规划
2014/01/02 职场文书
回门宴答谢词
2014/01/13 职场文书
运动会广播稿30字
2014/01/21 职场文书
求职简历自我评价范例
2014/03/12 职场文书
公司开业庆典主持词
2014/03/21 职场文书
如何写求职信
2014/05/24 职场文书
单位消防安全责任书
2014/07/23 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL