Today, I reviewed the plugin and found that it was not normal to appear when working under IE6, and tip often appeared in a very outrageous position. The problem also, because the tip of the display effect is not used to any image, are pure css, so the triangle inside the implementation of the IE6 can not work, will show a colored area, very ugly, so I would like to change it. Let's take a picture of the contrast:
JS aspects of the code is certainly not a problem, the problem of CSS, colortip with the position positioning, in the IE6 below may have a little problem. And because IE6 does not support border-color:transparent properties, the triangle under Tip also has a problem. Let's fix it.
Open the plugin's colortip-1.0-jquery.css this file, find the following code inside:
Copy Code code 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 particular color value for preparation by using the chroma filter * *
bottom:-12px;
height:0;
left:50%;
margin-left:-6px;
Position:absolute;
width:0;
font-size:0; /*ie The empty label will have a height, the font-size set to 0 can clear this height * *
_filter:chroma (color= #123456); /* For IE6 use chroma filter to filter the color #123456 into transparent * *
}
If you look at the code on your own, you may find that the code I posted is a little different than it was, but I've already written the note in it, and I think it's understandable. Continue below:
Copy Code code 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; * * Adjust the position of the small triangle more accurately.
margin-left:-7px;
}
. colortipcontainer{
position:relative;
Text-decoration:none!important;
_zoom:1; * Do not know why, here plus zoom:1 after IE6 use left:50% to get the correct position, is not inline elements layout? Unable to accurately express ... * *
}
Okay, here's the fix, on my machine, with the IETester and VMware virtual machine xp+ie6 all tested, you can also try the effect. There are any questions you can give me feedback, I can gerze change. Good understanding of the code, can not understand the direct use of plug-ins on the line.
Plugin website | Original Demo | Change after Demo | Revised plugin download
Add a sentence, the original and after the demo in the advanced browser inside the effect is the same, no difference, but with IE6 try to know. Hope I do this little bit of work, for the likes of this plug-in friends bring convenience, ^_^
On the method of pure CSS to achieve the effect of triangle, you can see this article Mr.think, very detailed and very good skills of the rounded corners of the CSS tips and triangles.
