为啥所有 HTML 表单元素都很大，系统范围的字体比例因子为 2.0？

Posted 2023-03-06

【中文标题】为啥所有 HTML 表单元素都很大，系统范围的字体比例因子为 2.0？

【英文标题】：Why are all HTML form elements huge with a system-wide font-scale factor 2.0?为什么所有 HTML 表单元素都很大，系统范围的字体比例因子为 2.0？

【发布时间】：2014-07-10 03:18:13

【问题描述】：

我已将“菜单和标题栏的比例”的因子设置为 2.0（请参阅 Ubuntu resolution with Ultrabook）

当我使用此设置时，我之前观察到了相同的行为：

org.gnome.desktop.interface text-scaling-factor 2.0

在我的 Ubuntu 桌面配置中使用unity-tweak-tool。

系统字体增加和浏览器字体增加的倍增使得系统控件（组合框、列表、下拉列表）变得非常大

如果您使用系统范围的缩放，Firefox 29、30、31 和 32 中的所有表单元素都会缩放到两倍大小，这很好。但是在互联网上的许多网站上，表单元素似乎被放大了一倍（因此在本例中为 4.0 倍），例如 The Trac Project 在他们修复它之前一直有这个问题here。

为什么会有帮助？

input, select, button  font-size: 100%  

为什么这会影响整个互联网上的这么多网站？

例如登录reddit:

---

或者这个例子：

这条 Trac search page 仍然有问题。

---

为了解决这个问题，我创建了一个插件来解决这个问题：Fix for zoomed default-font

但问题仍然存在：

为什么这会影响互联网上的这么多网站？

【问题讨论】：

虽然我不熟悉 Gnome 设置，但可能是由于使用了嵌套的 em 大小。但这只是猜测。

同意。这听起来像是经典的嵌套尺寸。

获取信息：这不是我在编程中遇到的问题！ 这个错误出现在数千个不同的网站上，因此引起了人们的极大兴趣。似乎没有人预料到有人可以使用系统范围的缩放因子。但如今，随着高分辨率显示器的出现，这种使用频率更高

听起来像是浏览器缩放问题，还是不管缩放多远都会出现问题？

是的，在所有缩放级别上。似乎所有表单元素的大小都被系统缩放级别调整了两倍。 Ctrl + 和 - 不会改变大小比例，它保持那么大

【参考方案1】：

仔细查看您的截图我会说您的系统范围字体设置为非常大的尺寸（使用 CSS：font-size: 200%;）。为什么？查看浏览器的选项卡。大小很大，我怀疑它可以通过 CSS 调整大小。想一想我会说任何没有明确字体大小的元素都会占用系统的字体大小 - 这是巨大的。结果，页面看起来有点难看。

解决方案：为所有内容设置明确的字体大小 (*font-size:100%;)

【讨论】：

当然，这就是为什么我的Fix for zoomed default-font Firefox 插件可以很好地解决这个问题。问题是，为什么系统范围的缩放会影响 firefo 为所有页面设置默认值 200%？

我已经写过：因为文本没有明确的字体大小。我猜所有没有明确大小的文本都会得到系统的字体大小。

不，看this examle没有任何css定义（下载原始文件，在本地打开它，缩放时查看Unity桌面的差异）

【参考方案2】：

我认为这到底是一个 Firefox 错误！我发了一个报告：https://bugzilla.mozilla.org/show_bug.cgi?id=1031073

如果 layout.css.devPixelsPerPx 设置为 -1，Firefox 应该服从系统范围的缩放。

目前没有。如果要解决此问题，您必须手动将其设置为 2。