CSS: активный не работает (IE 10)

Question

Всякий раз, когда я пытаюсь создать 3D-кнопки, вставляя элементы внутри элемента ... У меня нет проблем в Google и Firefox ... однако в IE10 ... кажется, есть разрыв между .parent: активный и это дети ...

Что-то вроде этого:

<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: http://jsfiddle.net/H75jN/

Все преобразований работает в IE10 ... что меня еще больше смущает, почему: активная функция не работает.

Я нацелен на неправильный класс?

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 Fiddle: http://jsfiddle.net/D8nJ6/1/

BAM!

В IE9 все еще есть проблема с закругленными границами, но это как-то связано с комбинацией Rounded-Border + Background-Gradient. Все еще ищет исправление.