How to apply gradient to element with correctly display in IE9?

I want apply gradient to my element. I use less to do it.

For IE9 I use the following css:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=@FirstColour, endColorstr=@SecondColour)";

where @FirstColour =#b7d4ee and @SecondColour=#7a9eca;

It is the gradient like this:

But in IE9 with css-style defined above, I see the gradient like this:

When page load in IE9 browser, my less isn't compiled (not sure why) and render into:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@FirstColour', endColorstr='@SecondColour')

How to get normal gradient display in IE9 with less using?

Answers


Use the gradient generator here It provides all gradient solutions for every browsers, including IE. Instruction is explained there


Try creating gradient from here:

http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html


Need Your Help

Use data template based on property

c# wpf

Is it possible to control which DataTemplate a node used based on a property rather than the class type which is typically seen in wpf.