1

要素内に要素をネストして 3D ボタンを作成しようとするたびに... Google と Firefox では問題ありませんが、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 関数が機能しない理由についてさらに混乱します。

間違ったクラスをターゲットにしていますか?

4

1 に答える 1

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/

バム！

IE9 では、丸みを帯びた境界線にまだ問題がありますが、Rounded-Border + Background-Gradient の組み合わせに関係があります。まだ修正を探しています。

于 2013-08-03T03:11:40.020 に答える