Question

我在Firefox中发现了一些有点烦人的故障。看到这个jsfiddle：http://jsfiddle.net/zMX75/2/。

蓝色部分应该可以悬空。但是，在带有按钮标记的Firefox中，它根本不起作用。

以下是代码：

button, .button {
    position:relative;
    overflow:visible;display:inline-block;
    height:23px;padding:0 5px;border:0;margin-left:20px;
    font-size: 12px;line-height:23px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration:none;
    color: #000;
    background: #ff0;
    &::before, &::after {
        position:absolute;top:0;
        display:inline-block;width:20px;height:23px;
        content: "";
        background: #00f;
    }
    &::before {left:-20px;}
    &::after {right:-20px;}}

我使用此代码使用精灵制作像按钮一样的箭头。

所以，我想知道除了更改标记之外是否还有其他解决方法，因为它用于提交表单。

Answer 1

一种解决方案是给按钮一些左右填充，并将其::before和::after放在填充上;这样它们就在按钮的可点击区域内。

换句话说，将其添加到CSS可以工作：

button {padding:0 25px; margin-left:0;
    &::before {left:0}
    &::after {right:0}
}

请参阅updated fiddle。

那就是说，我不确定为什么与<a>一起工作。如果按钮需要像这样解决，为什么<a>不需要以同样的方式对待？哦，好吧。

Answer 2

提供显示：块; 不显示：内联块;

按钮：仅在Firefox中无法恢复

2 个答案: