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

今天又回顾了一下这个插件,然后发现它在IE6下面工作的时候,显示起来是不正常的,tip经常出现在很离谱的位置。问题还有,由于tip的显示效果没有用到任何图像,都是纯的CSS,所以里面用CSS实现的三角形在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技巧之圆角背景与三角形。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
原文作者: Andy Croxall 原文链接: Ten Oddities And Secrets About JavaScript 翻译编辑: 张鑫旭 数据类型和定义 1. Null是个对象 JavaScript众多类型中有个Null类型,它有个唯一的值null, 即它的字面量,定义为完全没有任何意义的值。其表现得像个对象,如下检测代码: 复制代码 代码如下: alert(typeof null); //弹出 'object' 如下截图: 尽管typeof值显示是"object",但null并不认为是一
一个合作伙伴的页面效果,鼠标放到 图片上要变成彩色,本来就是一个简单的换色效果,但问题是,图片的高度和宽度不是一样大的。 这就比较麻烦了。如果把图片放到背景里就要一个一个的去定义图片外面的容器a/a,要多写很多层叠样式,太麻烦,最后我决定,把图片的高度的一一半,和图片的宽度赋值给它外面的容器a/a 然后把图片做了如下处理: 当鼠标移动到图片上让他向上移动30个像素,移开则回到原位。 html代码如下: 复制代码 代码如下: !--partner_box-- div class="partner_box"
方法说明: 结束响应,告诉客户端所有消息已经发送。当所有要返回的内容发送完毕时,该函数必须被调用一次。 如何不调用该函数,客户端将永远处于等待状态。 语法: 复制代码 代码如下: response.end([data], [encoding]) 接收参数: data end()执行完毕后要输出的字符,如果指定了 data 的值,那就意味着在执行完 response.end() 之后,会接着执行一条 response.write(data , encoding); encoding 对应data的字符编码
我们大多数人都使用过JavaScript,近年来随着各种JavaScript框架的流行使得JavaScript变得更加神奇和容易。"Anonymous (匿名)函数?不知道那是什么但是看起来和自己所写的差不多。” 你可能并不知道可以传给 new Function() 一个字符串作为函数的body来构造一个 JavaScript函数。编程中并不经常用到,但有时候应该是很有用的. 下面是 new Function 的基本用法: 复制代码 代码如下: // 最后一个参数是函数的 body(函数体),类型为 st
setAdminTabs.js代码中添加如下: 复制代码 代码如下: $("#adminTabs li").mouseover(function(){$(this).addClass("selectedTab")}); 始终不起作用,原因如下: 复制代码 代码如下: .selectedTab{background-color:White; border-bottom:1px} 定义两个属性,在admin.css的文件中存在,如下: 复制代码 代码如下: #adminTabs ul li{ float:lef
前台: 复制代码 代码如下: function SelectProject() { var a = new Array; var r = window.showModalDialog('SelProject.aspx', a, "dialogWidth=1000px; dialogHeight=600px; resizable: yes"); if (typeof (r) != 'undefined') { var arr = r.split(";"); $("#hidProjectInnerID").va
HTML处理 stripTags | escapeHTML | unescapeHTML JSON处理 unfilterJSON | isJSON | evalJSON | parseJSON 脚本处理 stripScripts | extractScripts | evalScripts 现在,String部分转入具体的关联应用,分别对应 HTML字符串,JSON字符串和HTML中的脚本字符串。 【乱入一句,有关JSON的一点东西,可以看看http://www.cnblogs.com/TomXu/arc
本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法。分享给大家供大家参考。具体分析如下: jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。就是能够迅速能把页面写成APP的界面,让用户浏览网页,相当于在使用布局好的app一样。 首先要在jQueryMobile( 点击此处本站下载 )下载一个压缩包,然后把这个压缩包的所有内容拉到
随机抽取,简单代码。 复制代码 代码如下: html title随机抽奖程序/title headmeta http-equiv=Content-Type content="text/html; charset=gb2312" /head body script type="text/javascript" var alldata = "a,b,c,d,e" var alldataarr = alldata.split(","); var num = alldataarr.length-1 ; var t
解决方法: 网上的答案经我验证都是不靠谱的,以后大家就知道了,Flexigrid在IE下不显示数据的处理方法是:指定一下Ajax请求数据的方式为Get方式 另外,flexigrid不是不可以使用“post”方式发送数据,而是“post”方式在IE下必须要有供post的数据,比如在分页的时候可以使用post方式,而在你没有什么数据要发送的话,一定要使用“get”方式,其它浏览器可能对这个要求不严格,而IE要求较严: