CSS : Make border-color:transparent compatible with IE
Hacky, Sneaky and quirky -- Hedger Wang
The problem:
Internet Explorer (include IE7) does not recognize "transparent" as a valid border-color.
codes like:
<![CDATA[
<div style="
border:solid 10px transparent;
background:yellow;
margin:6px 0;
padding:12px;
">box</div>
]]>
In internet Explorer, it looks like this.
box
While in other modern web browsers, it looks like this.
box
The Fix:
<![CDATA[
<style>
div{
border:solid 10px transparent;
background:yellow;
margin:6px 0;
padding:12px;
/*set an unused color to be index color*/
_border-color:tomato; /*For IE6-*/
/*then remove this indexed color*/
_filter:chroma(color=tomato);/*For IE6-*/
}
</style>
]]>
The Example:
And...you may use this fix to do more interesting examples for IE: