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

发布时间:2020-09-15 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了css – 如何从Firefox中的按钮中删除默认填充?编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > How to style button inputs to be identical in Chrome and Firefox?                                    4个
我在按钮内有一个span元素.跨度有背景颜色,但我不能让它填充Firefox中的按钮,它在Chrome和IE中都很好.

我看了两个类似的问题,但他们的答案似乎并没有解决这个问题.

> Remove extra button spacing/padding in Firefox
> firefox odd padding using anchor tags

这是我的问题的精简版:

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为输入和按钮元素添加了一个特殊的填充.”

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

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中的按钮中删除默认填充?全部内容,希望文章能够帮你解决css – 如何从Firefox中的按钮中删除默认填充?所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478