color transparent not working in IE

Question

I can able to get this functionality in Firefox and chrome. but below code, text is displaying in IE. that text should not display.

<a target="_blank" href="#">edit</a> 
<style>
    a {
        background: url("../images/edit1.gif") no-repeat scroll 0 0 transparent;
        color: transparent !important;
      }
</style>

http://stackoverflow.com/questions/2790181/color-transparent-not-working — Vucko, Dec 10 '12 at 12:30
Why not make the link the same color as the color of its underlying container? If it's inside a white div, just make the link white. — frenchie, Dec 10 '12 at 12:54

score 2 · Answer 1 · answered Dec 10 '12 at 12:30

Mostly IE 5-8 does not support the transparency property. But IE 9 will support it.

While searching for my blog i found the following method

.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%; 

/* Theoretically for IE 8 & 9 (more valid) */   
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);

/* Older than Firefox 0.9 */
-moz-opacity:0.5;

/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;

/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}

And

.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}

I referred this in Blog 1 and Blog 2

color transparent not working in IE

1 Answers1