每当我尝试通过在元素中嵌套元素来创建 3D 按钮时...我在 Google 和 Firefox 中都没有问题...但是在 IE10 中...似乎 .parent:active 和它是 children ……
像这样:
<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 fiddle : http://jsfiddle.net/H75jN/
所有的转换都在 IE10 中工作...这让我更加困惑为什么 :active 函数不起作用。
我定位错类了吗?
最佳答案
替换<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 中,圆 Angular 边框仍然存在问题,但这与 Rounded-Border + Background-Gradient 组合有关。仍在寻找解决方法。
关于html - CSS :active not working (IE 10),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18005982/