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 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
使用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
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
python2.7实现爬虫网页数据
2018/05/25 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
Python常用的json标准库
2019/02/19 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
西班牙在线光学:Visual-Click
2020/06/22 全球购物
附答案的Java面试题
2012/11/19 面试题
学年自我鉴定范文
2013/10/01 职场文书
消防器材管理制度
2014/01/28 职场文书
房屋转让协议书范本
2014/04/11 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技