css - 外观：按钮导致元素在Firefox中移动

Question

我有一个 div 我正在向appearance: button它添加样式。这可行，但它会导致 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;
}

Answer 1

您可以仅针对 Firefox 来解决问题：

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

它对你有用吗？

Answer 2

我看到它的方式有 2 种解决方案，在悬停时相应地添加/减少填充/边距以将移位假回其位置，如下所示：

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

或者，更好的是，添加一个默认的透明边框：

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

这将使盒子保持正确的大小，直到它悬停。