CSS按钮不在IE 8/10中显示

Question

目前我已经为一些客户页面创建了一些纯CSS按钮。除IE 8/10外，它们在所有浏览器中都能正常显示。但是，如果将css应用为内联样式，或者如果我打开兼容模式（默认情况下处于关闭状态），它们会显示样式（主要是）。

以下是页面：http://www.americasfinestpolice.com/patrolmens-benevolent-association-custom-watches.aspx

#btn-a-1, #btn-a-3, #btn-a-5, #btn-a-7, #btn-a-9, #btn-a-11 {
    outline: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.3) !important;
    -webkit-border-radius: .5em !important; 
    -moz-border-radius: .5em !important;
    border-radius: .5em !important;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2 !important);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
    color: #FFF !important;
    border: solid 1px #F61208 !important;
    background: #F61205 !important;
    background-color: #F61205 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#F61205), to(#9F0601)) !important;
    background: -moz-linear-gradient(top,  #F61205,  #9F0601) !important;
    background-image: -ms-linear-gradient(top, #F61205 0%, #9F0601 100%) !important;
    background-image: linear-gradient(to bottom right, #F61205 0%, #9F0601 100%) !important;
    height: 1% !important;
    width: 230px !important;
    color: #FFF !important;
    overflow: hidden !important;
    display: block !important;
}
<div class="btn btn-1"><a href="/nycpbawatches.aspx">
<div class="btn-text btn-2">

NYC PBA Mens<br />Chronograph Watch<br />(CLICK HERE)

</div>
</a>
</div>

请感谢您的帮助。