快捷導(dǎo)航

Colortip基于jquery的信息提示框插件在IE6下面的顯示問題修正方法

更新時(shí)間：2010年12月06日 14:46:03 作者：

今天看到了MK的這篇文章，然后其中的Colortip這個(gè)jQuery插件引起了我的注意，倒不是因?yàn)樗缕?，而是我之前看到過，沒想到它就成了2010年最佳之一了

今天又回顧了一下這個(gè)插件，然后發(fā)現(xiàn)它在IE6下面工作的時(shí)候，顯示起來是不正常的，tip經(jīng)常出現(xiàn)在很離譜的位置。問題還有，由于tip的顯示效果沒有用到任何圖像，都是純的CSS，所以里面用CSS實(shí)現(xiàn)的三角形在IE6下是無法工作的，會(huì)顯示一塊有色區(qū)域，很丑，所以我就想動(dòng)手改它一下。先上一張對(duì)比圖好了：

js方面的代碼肯定是沒問題的，問題出CSS上，Colortip用的是position進(jìn)行定位，在IE6下面可能存在著一點(diǎn)問題。而且由于IE6不支持border-color:transparent的屬性，所以tip下面的三角形也有問題。下面修正它吧。
打開插件的colortip-1.0-jquery.css這個(gè)文件，在里面找到如下代碼：

復(fù)制代碼代碼如下:

 
.pointyTip,.pointyTipShadow{ 
/* Setting a thick transparent border on a 0x0 div to create a triangle */ 
border:6px solid transparent; 
_border:6px solid #123456; /*指定一個(gè)特別的顏色值，為使用chroma濾鏡作準(zhǔn)備*/ 
bottom:-12px; 
height:0; 
left:50%; 
margin-left:-6px; 
position:absolute; 
width:0; 
font-size:0; /*IE下空標(biāo)簽會(huì)有一個(gè)高度，把font-size設(shè)為0可以清除這個(gè)高度*/ 
_filter:chroma(color=#123456); /*為IE6使用chroma濾鏡將顏色#123456過濾成透明的*/ 
} 

如果大家自行看一下代碼的話，可能會(huì)發(fā)現(xiàn)我貼出來的代碼和原來相比有點(diǎn)不同，但是我已經(jīng)把注釋寫在里面了，應(yīng)該可以理解吧。下面繼續(xù)：

復(fù)制代碼代碼如下:

 
.pointyTipShadow{ 
/* The shadow tip is 1px larger, so it acts as a border to the tip */ 
border-width:7px; 
bottom:-14px; 
_bottom:-15px; /*將小三角形的位置微調(diào)一下更準(zhǔn)確*/ 
margin-left:-7px; 
} 
.colorTipContainer{ 
position:relative; 
text-decoration:none !important; 
_zoom:1; /*不知道為什么，這里加上zoom:1后IE6下使用left:50%才能得到正確的位置，難道內(nèi)聯(lián)的元素沒有l(wèi)ayout？無法準(zhǔn)確表達(dá)……*/ 
} 

好了，到這里就修正完畢了，在我的機(jī)器上，用IEtester和VMware虛擬機(jī)的XP+IE6都測(cè)試通過，你也可以試試效果。有任何問題可以向我反饋，我能改則改。代碼好理解，不能理解的直接用插件就行了。

插件網(wǎng)站 | 原版DEMO | 改后DEMO | 修正后的插件下載

再補(bǔ)充一句，原版和改后的DEMO在高級(jí)瀏覽器里面的效果是一樣的，沒區(qū)別，但是用IE6試試就知道了。希望我做的這一點(diǎn)點(diǎn)微不足道的工作，為喜歡這款插件的朋友們帶來方便，^_^
關(guān)于純CSS的方法實(shí)現(xiàn)三角形的效果，可以參看Mr.Think的這篇文章，很詳細(xì)很不錯(cuò)的技巧CSS技巧之圓角背景與三角形。

您可能感興趣的文章: