如何从Firefox中的按钮中删除默认填充?

时间:2015-08-07 09:25:51

标签: css firefox

我在按钮内有一个span元素。跨度有背景颜色,但我无法在Firefox中填充按钮,在Chrome和IE中它很好。

我已经看了两个类似的问题,但他们的回答似乎并不适合我。

这是我的问题的简化版本:



div {
    height: 300px;
    width: 300px;
    background-color: red;
}
button {
    padding: 0px;
    margin: 0px;
    color: inherit;
    border: 0px none;
    background-color: blue;
}
span {
    background-color: yellow;
    display: block;
    width: 100%;
}

<div>
    <button><span>span</span></button>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:3)

好好解释here:“ Firefox为padding和按钮元素添加了一个特殊的input

这实际上解决了您的问题。

http://jsfiddle.net/2fm31sd7/1/

button::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="reset"]::-moz-focus-inner {
  padding: 0;
  border: 0 none;
}