Question

有人可以解释为什么<button>元素仍然有一些填充，无论样式如何？比较下面代码段中的四个元素：<button> <a> <span> <div>，它们都应用了相同的样式。最后三个看起来完全相同，但按钮固执地拒绝丢失Firefox中的填充。 Inspector显示它在Chrome中呈现相同但不是Firefox。

我可以应用CSS规则来控制它吗？

＆＃13;

.style {
  padding: 0px;
  border: none;
  background-color: #000;
  color: #fff;
  font-family: sans-serif;
  font-size: 14px;
  display: inline-block;
}

＆＃13;

<button class="style">TEST</button>
<a class="style">TEST</a>
<span class="style">TEST</span>
<div class="style">TEST</div>

＆＃13;

Answer 1

这基本上是firefox浏览器的问题，所以尝试添加button::-moz-focus-inner {padding: 0;border: 0}

.style {
  padding: 0px;
  margin: 0;
  border: none;
  background-color: #000;
  color: #fff;
  font-family: sans-serif;
  font-size: 14px;
  display: inline-block;
}
button::-moz-focus-inner {
  padding: 0;
  border: 0
}

<button class="style">TEST</button>
<a class="style">TEST</a>
<span class="style">TEST</span>
<div class="style">TEST</div>

为什么<button>在设置为0时仍然在Firefox中有填充

1 个答案: