为什么默认文本区域占位符和输入占位符呈现不同？
Why does a default textarea placeholder and an input placeholder get rendered differently?
在一个简单的 HTML 表单中 - 为什么在默认情况下文本区域和输入占位符呈现差异如此之大？
当前的 Firefox 和 Chrome 例如：
<form><input type="text" placeholder="what"><br><textarea placeholder="what"></textarea></form>
这是因为<textarea>用于多行输入，而input选项用于限制文本。
在 Edge/Chrome 和 Windows10 上进行的测试似乎设置中字体的首选项会影响为输入占位符选择哪种字体以及为文本区域占位符选择哪种字体。
如果您转到 edge://settings/fonts，例如检查无衬线字体和固定宽度字体的设置。在我的 Edge（以前没有更改设置）上，一个是 16pt Arial，另一个是 13pt Consolas。
这些设置与我所看到的 input 元素中的占位符和 textarea 元素中的占位符之间的差异相吻合。它们看起来与问题中为 Chrome 给出的图像相同（我希望 Chrome 和 Edge 相同）。
现在尝试将固定宽度字体设置为 Arial。
输入和文本区域输入渲染相同。
因此，用户看到的内容取决于他们各自浏览器中的设置，主要的收获似乎是
您不能依赖浏览器中的默认设置来提供跨浏览器的统一外观，甚至不能在相同的 OS 上使用相同的浏览器，因为它们可能已被更改。
在一个简单的 HTML 表单中 - 为什么在默认情况下文本区域和输入占位符呈现差异如此之大？
当前的 Firefox 和 Chrome 例如：
<form><input type="text" placeholder="what"><br><textarea placeholder="what"></textarea></form>
这是因为<textarea>用于多行输入，而input选项用于限制文本。
在 Edge/Chrome 和 Windows10 上进行的测试似乎设置中字体的首选项会影响为输入占位符选择哪种字体以及为文本区域占位符选择哪种字体。
如果您转到 edge://settings/fonts，例如检查无衬线字体和固定宽度字体的设置。在我的 Edge（以前没有更改设置）上，一个是 16pt Arial，另一个是 13pt Consolas。
这些设置与我所看到的 input 元素中的占位符和 textarea 元素中的占位符之间的差异相吻合。它们看起来与问题中为 Chrome 给出的图像相同（我希望 Chrome 和 Edge 相同）。
现在尝试将固定宽度字体设置为 Arial。
输入和文本区域输入渲染相同。
因此，用户看到的内容取决于他们各自浏览器中的设置，主要的收获似乎是
您不能依赖浏览器中的默认设置来提供跨浏览器的统一外观，甚至不能在相同的 OS 上使用相同的浏览器，因为它们可能已被更改。