Firefox 按钮删除 Firefox 77 中的填充答案

【问题标题】：firefox button remove padding in firefox 77Firefox 按钮删除 Firefox 77 中的填充
【发布时间】：2020-05-17 05:59:09
【问题描述】：

我尝试使用 stackoverflow 上的解决方案来执行此操作，但它似乎不适用于较新版本的 firefox。我希望红色背景占据整个按钮，但这仅适用于 chrome，不适用于 Firefox。我添加了应该解决这个问题的button::-moz-focus-inner css 规则。有谁知道如何在较新版本的 Firefox 中执行此操作？

<style>

button {
    padding: 0px;
}

label {
    display: block;
    padding: 1px 6px;
    background-color: red;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}
</style>

<button>
    <label for="myId">My Button</label>
</button>

<br />

<button>My Button</button>

<input id="myId" type="checkbox" />

【问题讨论】：

注意：<br> 和 <img> 标签不使用也不需要结束斜杠，并且在 HTML 中永远不会有。此外，您的 HTML 无效。 <label> 不能在按钮内。

标签： css firefox button padding

【解决方案1】：

您已将标签放入按钮中，并将红色背景应用于标签，而不是按钮。最好不要使用标签标签，但如果需要，请将按钮放在标签标签中。

<style>
button {
    /* Padding is pretty important for buttons */
    padding: 3px 5px;
    border: 0;
    background-color: red;
    cursor: pointer;
    margin: 0px;
}
</style>

<button>My Button</button>

<!-- It is good practice to put labels right before what they are labeling -->
<label for="myId"><button>My Button</button></label>
<input id="myId" type="checkbox" />

我可能是错的，而且我绝不是想变得粗鲁。但看起来你对网络开发很陌生。在W3Schools 上查找您遇到问题的任何 CSS 属性或标签。这是一个很棒的网站。干杯，艾萨克。

【讨论】：

将<label> 放在按钮内只是普通的无效 HTML。