渐变和圆角CSS的IE9显示问题

Question

I made a CSS class that applies a gradient and rounded corners to a span element to act as a button. It seems to work in most browsers that I've tested, but IE9 is giving me some issues. As the class is now the rounded corners aren't working correctly. However if you look very close it seems like there are rounded corners underneath a layer that is not rounded (I think that's the best way to explain how it looks, forgive me if that doesn't make sense)

Anyway, by trial and error I messed with the class until I found that removing the 'display:inline-block;' property allows for the rounded corners to be displayed correctly, but as a result the gradient no longer works. Any ideas?

http://jsfiddle.net/jessikwa/wcgzkkgr/

The HTML:

<span class="action_button">Button</span>

The CSS:

.action_button
{
color: #FFFFFF;
font-size: 12px;
font-family: arial;
cursor: pointer;
text-decoration: none;
padding: 3px 5px;
display: inline-block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid #f7a03b;
webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: #8b8b8b 0px 1px 4px;
-moz-box-shadow: #8b8b8b 0px 1px 4px;
box-shadow: #8b8b8b 0px 1px 4px;
background-color: #efbb7f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#efbb7f), to(#f88600));
background-image: -webkit-linear-gradient(top, #efbb7f, #f88600);
background-image: -moz-linear-gradient(top, #efbb7f, #f88600);
background-image: -ms-linear-gradient(top, #efbb7f, #f88600);
background-image: -o-linear-gradient(top, #efbb7f, #f88600);
background-image: linear-gradient(to bottom, #efbb7f, #f88600);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#efbb7f, endColorstr=#f88600);
}

Update: Further reading of other posts in StackOverflow gets me a bit closer, but still not quite right.

IE9 border-radius and background gradient bleeding

This post's answer suggestions using an image, which I would prefer to avoid. Another proposed answer of the thread puts a wrapper around the button with "overflow:hidden;", but this doesn't seem to be quite right, either.

http://jsfiddle.net/uu19uqg4/

Answer 1

you have forgot the "-" near webkit-border-radius

try this :

-webkit-border-radius: 3px;

this link can be usefull

Answer 2

Add the following in the head of the page.

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

This will disable the compatibility mode in IE9. If it's due to compatibility issue then it will be solved.