buttons and links in ie9
===

I've seen tons of ie css questions, but none that seem to address what I'm asking here.  Forgive me if I've missed one and asked a dupe:)

I have a website (asp.net mvc2, c#) littered with links similar to this:

    <a href="<%= Url.Action("Action", "Controller")%>">
        <div class="buttons">
            <button type="button"> Click Me</button> 
        </div>
    </a>
These work fine in Chrome, FF and Safari, but not in IE9.  The button itself seems to cancel out the link.  In other words, the link is only active on the very outer edge of the button (if at all).

I'm not very fluent with Css, but here's the relevant bit (I think, though I suppose the problem could lie elsewhere...):

        .buttons a, .buttons button{
           display:inline-block;
           text-align: left;
           float:left;
           margin:0 7px 0 0;
           background-color:#f5f5f5;
           border:1px solid #0b0101;
           border-top:1px solid #eee;
           border-left:1px solid #eee;    
           font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
           border-top-left-radius: 3px;
           border-top-right-radius: 3px;
           border-bottom-left-radius: 3px;
           border-bottom-right-radius: 3px;
           line-height:130%;
           text-decoration:none;
           font-weight:bold;
           color:#565656;
           cursor:pointer;
           padding:5px 10px 6px 7px; /* Links */
       }
       .buttons button{
           width:auto;
           overflow:visible;
           padding:4px 10px 3px 7px; /* IE6 */
       }
       .buttons button[type]{
           padding:5px 10px 5px 7px; /* Firefox */
           line-height:17px; /* Safari */
       }

Does anyone know a workaround or hack for this?  Thanks!