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.