-1

appearance: buttonスタイルを追加する div があります。これは機能しますが、Firefox でシフトが発生します。ボーダーが原因であると思われますが、使用box-sizing:border-boxしても停止しません。幅と高さも追加しようとしましたが、それでもずれます。

http://jsfiddle.net/2CEuu/2/

<div id="add-new-complaint">
    <div class="plus 3"></div>
    Add new Complaint
</div>

[id|=add-new]{
    display: inline-block;
    padding:4px;
    cursor:pointer;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
[id|=add-new]:hover{
    -webkit-appearance:button;
    -moz-appearance:button;
    appearance:button;
}
div.plus{
    width:15px;
    height:15px;
    position:relative;
    display: inline-block;
}
div.plus::before{
    width:100%;
    height:33.333%;
    top:33.333%;
    left:0;
    position:absolute;
    content:'';
    background-color:#789dc3;
}
div.plus::after{
    width:33.333%;
    height:100%;
    top:0;
    left:33.333%;
    position:absolute;
    content:'';
    background-color:#789dc3;
}
4

2 に答える 2

2

この問題を解決するには、Firefox のみをターゲットにすることができます。

@-moz-document url-prefix() {
    [id|=add-new]:hover{
        padding: 1px;
    }
}

それはあなたのために働くでしょうか？

于 2013-04-29T22:26:25.597 に答える
1

私が見る方法には2つの解決策があります。ホバーに応じてパディング/マージンを追加/削減して、シフトをその位置に戻すように偽装します。

a { margin: 10px 5px; padding: 10px; }
a:hover { padding: 9px 10px 10px 9px; }

または、より良いのは、デフォルトの透明な境界線を追加することです:

a { border: 1px solid rgba(0,0,0,0); }

これにより、ホバリングされるまでボックスが正しいサイズに保たれます。

于 2013-04-29T21:59:53.547 に答える