CSS :活动不工作(IE 10)

Question

每当我试图通过在元素中嵌套元素来创建3D按钮时.我在谷歌和火狐上没有问题..。然而在IE10..。.parent:active和孩子之间似乎有一种分离.

就像这样：

<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.这使我更加困惑: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 Fiddle：http://jsfiddle.net/D8nJ6/1/

哈哈！

在IE9中，圆角边框仍然存在问题，但它与圆角边框+背景梯度组合有关。还在找解决办法。