IE 9 and styling the button element

I have a button element where I apply a css class which adds borde开发者_如何转开发r color to the various sides of the button. This worked in the previous IE versions, but not in IE 9

HTML:

<button class="hello-button">Hello, World</button>

CSS:
.hello-button {     
    border-width: 2px;
    border-style: solid;
    border-color: #eee #a9a9a9 #a9a9a9 #eee;
}

Is this a known issue and are there workarounds besides of the border-style: outset; I have tried various combinations but it seems like you can not any longer style the borders of the button element.

Edit: formating

If you specify 3 of the borders, those borders will render in IE9. Once you specify the 4th border, IE9 refuses to render any of the borders

Works:

.hello-button {     
    border-top: 2px solid #eee;
    border-right: 2px solid #a9a9a9;    
    border-bottom: 2px solid #a9a9a9;   
}

Doesn't Work:

.hello-button {     
    border-top: 2px solid #eee;
    border-right: 2px solid #a9a9a9;    
    border-bottom: 2px solid #a9a9a9;   
    border-left: 2px solid #eee;
}

Unless there's a valid (or at least spec'd) reason for this behavior, it looks like a bug to me...

This one is weird. It actually works if you don't specify border-style. IE9 will then give you a solid border, but other browsers will do all kinds of different things.

But it goes back to working if you specify border-radius (in addition to border-style).. So go on and treat yourself to some modern CSS styling :)

Of course this is not ideal if you want a perfectly square button, but you can set a low value for the radius (double check how it looks, though).

It does look like a bug. Can you define a document compatibility mode for an older version of IE?

http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx

Looks like a bug. Since I controll the server I solved it by setting a X-UA-Compatible response header to IE=EmulateIE8

http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx#Servers