为什么 Firefox 83 默认向多个 select 选项列表中的选项添加明显明显的填充?

Why is Firefox 83 adding visibly noticeable padding by default to options in a multiple select option list?

我刚刚在 macOS Big Sur (11.0.1) 上将我安装的 Firefox 安装升级到版本 83,今天早上在为客户站点编写代码时注意到一些奇怪的事情:似乎从版本 83 开始,Firefox 现在是在多个 select 项列表中的 <select> 列表 <option> 项的顶部和底部添加 2 个像素的填充。

我能够通过创建这个非常简单的 HTML 表单来测试和复制问题:

<form>
  <select name="numbers[]" form="this_form" autocomplete="on" size="4" multiple>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
    <option value="Four">Four</option>
    <option value="Five">Five</option>
    <option value="Six">Six</option>
    <option value="Seven">Seven</option>
  </select>
</form>

并将其纯粹作为文件加载(拖放)到 Firefox 83 和 Safari 14.0.1 中。下面的屏幕截图加载了检查员以确认我所看到的内容。

这是错误、功能还是其他?通过在站点的 CSS 文件中设置此 CSS 值,我能够在客户网站上消除此问题:

select option {
  padding: 0;
}

我知道 Firefox 允许设置这样的 CSS 在 this 2013 post on Stack Overflow:

中确认

“The restriction depends browser to browser, like padding and even margin of option tag works in the Mozilla Firefox while it doesn't work with Chrome.”

但最终让我感到困惑的是,为什么 Firefox 83 中的 <select> 列表 <option> 项现在有一个默认的 padding: 2px 4px 2px 4px 设置?


Firefox 83 <select> 列表 <option> 填充:


Safari 14.0.1 <select> 列表 <option> 填充:

我认为这已被 https://bugzilla.mozilla.org/show_bug.cgi?id=1656004 更改。

Mozilla 正在重新设计 Firefox 的表单控件,这是更改的一部分,但 Firefox 过去在水平轴上使用 3px 5px,这是相同的填充量。在垂直轴上,它确实在选项周围添加了 2px 的填充。

但是您可以根据需要自行更改 CSS,这只是更改了默认的 UI 样式。