为什么 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 样式。
我刚刚在 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 样式。