CSS：active not working（IE 10）

Question

每當我嘗試通過在元素中嵌套元素來創建3D按鈕...我在Google和Firefox中沒有問題...但是在IE10中......似乎有一個它的孩子......

事情是這樣的積極：

<ul class="checkout"> 
    <li id="creditcard"> 
     <a href="#" class="a-btn"> 
      <span class="a-btn-left">Proceed to Checkout</span> 
      <span class="a-btn-slide"><img class="slide-icons" src="icons.png" /></span> 
      <span class="a-btn-right"> 
       <span class="arrow"></span> 
       <span class="cards"></span> 
      </span> 
     </a> 
    </li> 
</ul> 

這裏是一個JS小提琴：在.parent脫節http://jsfiddle.net/H75jN/

所有變換的IE10工作...這讓我更加困惑，爲什麼：active函數不起作用。

我的目標是錯誤的類嗎？

Answer 1

更換<a>與<button>

添加額外的CSS：

padding:0 0 5px 0; /* This is necessary for the Box shadow to work in Chrome */ 
border:0; 
outline:0; 
overflow:visible; /* Necessary for any images to overflow past button edges */ 
cursor:pointer; 
background:none; /* This eliminates grey background in FF and IE */ 
box-sizing:content-box; /* By default, Chrome BUTTONS are border-box, this fixes it */ 

完成！

JS小提琴：http://jsfiddle.net/D8nJ6/1/

BAM！

在IE9中，圓角邊框仍然存在問題，但它與圓角邊框+背景漸變組合有關。仍在尋找修復。