Stylized HR is not showing properly in IE - html

Question

I created <hr> tag and it's not showing properly in Internet Explorer. Here is it's CSS:
hr {
clear: both;
border: 0;
height: 1px;
background: transparent;
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0));
}
And here is jsfiddle http://jsfiddle.net/NC6ya/. How can I fix it in IE so it looks as it's supossed to do?
Thanks.

Answer 1

You jsfiddle does in fact work perfectly fine in IE10. It doesn't work in IE9 or earlier because those versions of IE do not support CSS gradients.
There are a few solutions available to you:
Use a polyfill script such as CSS3Pie to add support for CSS gradients to older IE versions. As I say, CSS3Pie is probably the best script available for this as it works pretty much seamlessly and works in all IE versions from IE6 to IE9.
Use IE's proprietary -ms-filter style.
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')";
It's not pretty but it does the job (albeit with some known bugs). Note the above is just an example copied from elsewhere; you'll need to tweak it to your requirements. There are a number of gradient generator tools that will help you get the right syntax for IE. Try this one for example.
If you need to support IE7 or IE6, you'll need to specify both the filter and -ms-filter syntax variants. For just IE8 / IE9 support you only need the -ms-filter syntax.
Personally, I'd prefer the polyfill option above rather than the filter, because it's neater -- you're using standard CSS code -- and also because it avoids a couple of nasty little quirks in the filter style that are best avoided.
And of course, the final option is just to let old IE versions go without a gradient. Provide a suitable solid background for them as a fall-back, and forget about it. It's always nice to support old IE users where possible, but if it's not going to make a noticeable difference to the usability of the site, it's sometimes not worth the effort. This should be decided on a case-by-case basis; sometimes it's best to give support, other times it isn't. It's up to you to decide in you specific case.
Hope that helps.
Finally, one other thing I would suggest is to add another CSS line with an unprefixed version of the gradient style:
background-image: linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0));
If you're specifying prefixed styles, you should always also specify the equivalent unprefixed version as well, because once a browser supports the standard, they often remove support for the prefixed version, which means that if you haven't specified the standard, it can break your code in future versions. Not good.

Answer 2

I believe the issue is to do with the css properties that IE recognises. If you add the following to your css then you should see a gradient effect, albeit not the same as your example.
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 )
I found these articles which may be of use to
http://msdn.microsoft.com/en-us/library/ms532847.aspx
http://www.briangervais.com/blog/css-gradients-with-internet-explorer-ie6-10