Question

我有一个div我正在添加appearance: button样式。这有效，但它导致Firefox的转变，我怀疑它是由于边界，但使用box-sizing:border-box并没有阻止它。我也试过添加宽度和高度，但它仍然会移动。

<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

我看到它有两种解决方案，在悬停时相应地添加/减少填充/边距以伪造移位回到其位置，像这样：

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

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

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

这将使盒子保持正确的大小，直到它被盘旋。

外观：按钮导致元素在firefox中移位

2 个答案: