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

标签 css firefox

<分区>

我在按钮内有一个 span 元素。 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>

最佳答案

就像解释得很好here : "Firefox 向 input 和按钮元素添加了一个特殊的 padding"

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

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;
}

关于css - 如何从 Firefox 中的按钮中删除默认填充?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31874222/

相关文章:

javascript - 动态导航列表菜单

javascript - jQuery 的 .val() 在 Firefox 和 Chrome 中为带有占位符文本的输入元素返回不同的值

jquery - 为什么我收到 jQuery 未定义错误?

firefox - 如何在 Firefox 中嵌入支持键盘的 YouTube 视频?

html - 如何删除 body 标签中 header 和下一个 div 元素之间的空格?

javascript - 滚动后导航栏没有响应

html - 如何改变metro-ui网站的宽度

css - 背景颜色,顶部有不透明图像

javascript - HTML5 视频在循环时卡顿?

css - 如何在 Firefox 中覆盖 "Minimum font size"影响 svg 中的文本?