IE9 border-radius inconsistency

Any ideas?

I have a site with border-radius working in IE9 sometimes, but not others. I have also included the...

<meta http-equiv="X-UA-Compatible" content="IE=9" />

in the header. This does not seem to make a difference if present or not. It works on various parts of the page such as below...

#nav a {
font-weight: bold;
color: #fff;
text-deco开发者_如何学Pythonration: none;
display: block;
padding:  8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
border-radius: 1.6em;
/* text-shadow: 0 1px 1px rgba(0, 0, 0, .3); */
font-size: 18px;
background-color:rgba(72,124,158,0);
    -webkit-transition:All 0.5s ease;
    -moz-transition:All 0.5s ease;
    -o-transition:All 0.5s ease;

}

but not in the example below.

nav {
margin: 0;
padding: 0;
line-height: 100%;
-webkit-border-top-left-radius: 2em;
-moz-border-radius-topleft: 2em;
border-top-left-radius: 2em;
-webkit-border-bottom-left-radius: 2em;
-moz-border-radius-bottomleft: 2em;
border-bottom-left-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
background: #007bb6; /* for non-css3 browsers */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#004677',   endColorstr='#007bb6'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#004677), to(#007bb6)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #004677,  #007bb6); /* for firefox 3.6+ */
background: -o-linear-gradient(top,  #004677,  #007bb6); /* for Opera */
background: linear-gradient(top,  #004677,  #007bb6); 
/* border: solid 1px #6d6d6d; */    
height: 38px;
display: block;
float: right;
width: 750px;
margin-top: 15px;
}

I also can't see a pattern for it working or not using px or em's, or if the element uses it in conjunction with gradients or box shadows. Anybody had anything similar?

Thanks

try without the DirectX gradient, it's overwritten my rounded corners before.

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#004677',   endColorstr='#007bb6'); /* for IE */

Change your padding in your .nav class to 10px, and see if it still happens.

It's definitely the linear-gradient filter that's causing the issue. A nice way around this is to use Modernizr to feature detect, and then supply different rules targeted via classes eg

.cssgradients {
..use the linear-gradient rules
}
.no-cssgradients {
.. another rule, not using the ie filter
}

In the .no-cssgradients declaration, you could supply a background image, or even cooler, a data-uri to reduce http requests eg

background-image: url(data:image/png;base64,iVBORw0KGgoA....);

You can translate your background images using an online tool such as this one

I've used this technique to successfully combine linear gradients and rounded-corners to older ie browsers with the addition of CSS3 PIE, without CSS3 PIE then trying to also replace the linear gradient with a filter.