CSS linear gradients not working on live server (IE only), fine on localhost

Question

I have just rolled out a new Intranet that ive been working on for some time. All is good (apart from the inevitable user-centric issues and a couple of bugs)

However its just become apparent (now that i have a chance to actually look at the front end as opposed to hacking code to fix problems) that for some reason my css linear gradients arent working.

This is very odd to me, as when i view the same site in its test environment (localhost) the gradients work in all their glory. on the same PC, in the same browser (2 tabs open, one local, one external)

all other css (in the same style file) works fine.

#PageTitleBox{
position:absolute;
left:0px;
top:2px;
width:169px;
z-index:3;
padding-top:0px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
background-color:#A9D4CC;
background-image: -webkit-linear-gradient(180deg, #A9D4CC, #7DB4B3);
background-image: -moz-linear-gradient(180deg, #A9D4CC, #7DB4B3);
background-image: -o-linear-gradient(180deg, #A9D4CC, #7DB4B3);
background-image: linear-gradient(180deg, #A9D4CC, #7DB4B3);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#7DB4B3', endColorstr='#A9D4CC')";
height: 55px;}

Answer 1

OK. I reckon you may have IE9 switched to compatibility view. (http://stackoverflow.com/questions/3726357/why-does-ie9-switch-to-compatibility-mode-on-my-website).

You can include <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> in your HTML HEAD to instruct IE to not do this, or set the equivalent HTTP response header using the server.

IE might ignore this anyway if the reason is your live server is considered to be part of your Intranet Zone by IE. In which case you have to configure IE not to use Compatibility View for intranet sites, in the Compatibility View settings.

Answer 2

您可以将渐变对象的“启用”属性设置为true。

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled='true', GradientType=1, startColorstr='#7DB4B3', endColorstr='#A9D4CC')";