How to correct the display problem of Colortip's information prompt box plug-in based on jquery under IE6_jquery

I reviewed this plug-in again today, and found that when it was working under IE6, the display was abnormal, and the tips often appeared in ridiculous positions. Another problem is that since the display effect of the tip does not use any images, it is all pure CSS, so the triangle implemented with CSS will not work under IE6, and a colored area will be displayed, which is very ugly, so I want to do it. Change it. Let’s take a comparison picture first:

There is definitely no problem with the js code. The problem lies in CSS. Colortip uses position for positioning. There may be some problems under IE6. And since IE6 does not support the border-color:transparent attribute, there is also a problem with the triangle under the tip. Let’s fix it below.
Open the colortip-1.0-jquery.css file of the plug-in and find the following code in it:

Copy the code The code is as follows :

.pointyTip,.pointyTipShadow{
/* Setting a thick transparent border on a 0x0 div to create a triangle */
border:6px solid transparent;
_border: 6px solid #123456; /*Specify a special color value to prepare for using the chroma filter*/
bottom:-12px;
height:0;
left:50%;
margin -left:-6px;
position:absolute;
width:0;
font-size:0; /*Empty labels under IE will have a height. Setting font-size to 0 can clear this Height*/
_filter:chroma(color=#123456); /*Use the chroma filter for IE6 to filter color #123456 into transparent*/
}

If you do it yourself If you look at the code, you may find that the code I posted is a little different from the original one, but I have written the comments in it, so it should be understandable. Continue below:

Copy code The code is as follows:

.pointyTipShadow{
/* The shadow tip is 1px larger, so it acts as a border to the tip */
border-width:7px;
bottom:-14px;
_bottom:-15px; /*Finely adjust the position of the small triangle It will be more accurate*/
margin-left:-7px;
}
.colorTipContainer{
position:relative;
text-decoration:none !important;
_zoom:1; /*I don’t know why, but after adding zoom:1 here, I can use left:50% to get the correct position under IE6. Doesn’t the inline element have a layout? Can't express it accurately...*/
}

Okay, the correction is completed here. On my machine, the XP IE6 test using IEtester and VMware virtual machine passed. You You can also try the effect. If you have any questions, please give me feedback and I can make corrections. The code is easy to understand. If you don’t understand it, just use the plug-in.

Plug-in website | Original DEMO | Revised DEMO | Corrected plug-in download

I would like to add that the effect of the original version and the modified DEMO in advanced browsers is the same, there is no difference, but you will know after trying it with IE6. I hope that this trivial work I have done will bring convenience to friends who like this plug-in. ^_^
Regarding the pure CSS method to achieve the triangle effect, you can refer to this article by Mr. Think. It is very Detailed and very good CSS techniques: rounded background and triangle.