為什么默認 textarea 占位符和輸入占位符的呈現方式不同？

Question

在一個簡單的 HTML 表單中 - 為什么在默認情況下文本區域和輸入占位符呈現差異如此之大？

當前 Firefox 和鉻例如：

<form><input type="text" placeholder="what"><br><textarea placeholder="what"></textarea></form>

Answer 1

在 Windows10 上的 Edge/Chrome 上進行測試，似乎設置中 fonts 的首選項會影響為輸入占位符選擇哪種字體以及為 textarea 占位符選擇哪種字體。

例如，如果您將 go 設置為 edge://settings/fonts，請檢查無襯線字體和固定寬度字體的設置。 在我的 Edge（以前沒有更改設置）上，一個是 16pt Arial，另一個是 13pt Consolas。

這些設置與我所看到的 input 元素中的占位符和 textarea 元素中的占位符之間的差異相符。 它們看起來與問題中為 Chrome 提供的圖像相同（我希望 Chrome 和 Edge 相同）。

現在嘗試將固定寬度字體設置為 Arial。

input 和 textarea 輸入呈現相同的內容。

因此，用戶看到的內容取決於他們各自瀏覽器中的設置，而主要的收獲似乎是

您不能依賴瀏覽器中的默認設置來在瀏覽器之間提供統一的外觀，甚至不能依賴於同一操作系統上的同一瀏覽器，因為它們可能已更改。

Answer 2

這是因為<textarea>用於多行輸入，而input選項用於有限文本。