為什麼 input 元素需要指定 height (以及其他內容)

先說結論。

在除 IE<=11 之外的瀏覽器中，若未給一個文本輸入 input 顯式指定 height, 那他的 content-box 高度就是他的 line-height. 然而在 IE11 及以下版本中， content-box 的高度則默認為 1.15em. (舊版 Firefox 的 button 也有類似問題? 忘了反正已經被修復了) 因此我們需要明確為 input 元素指定高度。圖中的 1px (CSS 像素) 的 misalignment 是正常的渲染。

在除 IE<=11 之外的現代瀏覽器中 (Microsoft Edge 包括)，知乎的搜索框比提問按鈕高 1px. 原因是他的字型大小 14px 而 line-height 是 17px, content-box 的高度也因此是 17px. 然而 1.15em 的高度則是 16px. 而如果知乎的搜索框 content-box 高度恰好為 16px, 則它的 border-box 高 32px, 和按鈕恰好對齊。

這 1px 就是這樣來的。

其實我想吐槽的問題是，說好的 Macs 呢? 難道知乎的前端們都只格了 Mac 裝 Windows 然後用 IE 嗎? 如果不是為什麼這個 misalignment 一直沒人注意到呢?

推薦閱讀：