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

今天回顾了一下这个插件，发现它在IE6下工作的时候出现异常，提示经常出现在离谱的位置。还有，由于tip的显示效果是纯CSS，没有任何图像，其中CSS实现的三角形在IE6下无法工作，会显示有颜色的区域，非常难看，所以想自己修改一下。让我们从前面的对比图开始：

js的代码肯定没问题。问题出在CSS上。Colortip按位置定位。IE6下可能会有一些问题。而且因为IE6不支持border-color:transparent的属性，所以tip下面的三角形也有问题。让我们现在纠正它。打开插件的colortip-1.0-jquery.css文件，在里面找到如下代码：复制代码如下：pointytip，pointytipshadow {/*在0x0div上设置一个厚透明边框，以创建一个三角形*/border33606px实心透明；_border:6px固体# 123456；/*指定一个特殊的颜色值，为使用色度过滤器做准备*/bottom :-12px；高度：0；左侧：50%；左边距：-6px；位置：绝对；宽度：0；font-size :0；/*IE下的空标签会有一个高度，可以通过将font-size设置为0 */_ filter 3360 chroma(color=# 123456)来清除；/*使用色度过滤器过滤颜色#123456为IE6透明*/}如果你自己看代码，你可能会发现我贴的代码和原来的有点不一样，但是我已经在里面写了注释，应该可以理解。继续：复制代码如下：pointytipshadow {/*阴影顶端比它大1px，所以它充当顶端的边框*/边框-宽度：7pxbottom :-14px；_ bottom :-15px；/*微调小三角的位置更准确*/margin-left :-7px；} .colorTipContainer { position : relative；文本装饰：none！重要；_ zoom:1/*不知道为什么。在这里添加zoom:1后，我可以在IE6下使用left:50%得到正确的位置。内联元素没有布局吗？无法准确表达.*/}好了，这里修正完毕。在我的机器上，使用IEtester和VMware虚拟机的XP IE6已经通过了测试。也可以试试效果。如果你有任何问题，可以给我反馈。我可以改变它们。代码很容易理解。看不懂就直接用插件。插件网站|原始演示|修改后的演示|修改后的插件下载。对了，原来和修改后的DEMO在高级浏览器里效果一样，没有区别，但是试试IE6就知道了。希望我的一点点工作能给喜欢这个插件的朋友带来方便。_关于纯CSS达到三角形效果的方法，请参考Think先生的这篇文章，这是一个非常详细的好技巧，CSS，圆角背景，三角形。