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 相关文章推荐
JQUERY获取form表单值的代码
Jul 17 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
Element中Slider滑块的具体使用
Jul 29 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 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
PHP开发过程中常用函数收藏
2009/12/14 PHP
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
php旋转图片90度的方法
2013/11/07 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
用python删除java文件头上版权信息的方法
2014/07/31 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
Python根据服务获取端口号的方法
2019/09/25 Python
django 模版关闭转义方式
2020/05/14 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
html5图片上传预览示例分享
2014/04/14 HTML / CSS
迎新晚会主持词
2014/03/24 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
员工培训协议书
2014/09/15 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript