WORKAROUND: IE Transparent gradients
As we all know IE browsers have their limitations, but our brains do not.
While driving my car I was trying to solve the issue and I came up with the following solution.
Problem: 20px heigh div with gradient from rgb(160,160,160) top to rgb(255,255,255) bottom with decreasing opacity.
Solution:
HTML
Code:
<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="/css/ie.css" />
<![endif]-->
<div id="topGradient">
<!--[if lt IE 10]>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<![endif]-->
</div>
CSS
Code:
div#topGradient > div {
background-color: rgb(160,160,160);
width: 100%;
height: 1px;
filter: alpha(opacity=95);
}
div#topGradient > div+div {
background-color: rgb(165,165,165);
filter: alpha(opacity=90);
}
...
...
div#topGradient > div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div {
background-color: rgb(255,255,255);
filter: alpha(opacity=5);
}
This could all be written with Javascript of course and if IE would only support nth-child it would make things easier.
I hope it helps anyone and perhaps the PIE.htc can be updated to detect transparent gradients + height and render the different divs.
Btw, you don't want to zoom in with this solution
Cheers
Forums
