CSS box-sizing: border-box 在 IE 導致文字垂直偏移的修復方案

現象描述

• 現代瀏覽器：輸入框/按鈕文字垂直置中正常。
• IE (含 IE11)：文字明顯偏下，視覺未置中。

根因分析

box-sizing: border-box 改變盒模型計算方式，但 IE 對內部行內元素 (文字) 的基線計算與標準不一致，導致 line-height 與 height 關係錯位。

修復方案 (按推薦順序)

1. 明確設定 line-height = height (最通用)

.input-fix {
    box-sizing: border-box;
    height: 36px;
    line-height: 36px; /* 關鍵：強制行高等於盒高 */
    padding: 0 12px;   /* 水平內距 */
    /* 垂直 padding 設為 0，避免雙重影響 */
}

2. 使用 Flexbox 置中 (現代專案、IE10+)

.input-flex {
    box-sizing: border-box;
    height: 36px;
    display: flex;
    align-items: center; /* 垂直置中 */
    padding: 0 12px;
    /* 子元素 (input) 需移除自身 line-height 干擾 */
}
input.input-flex { 
    height: auto; 
    line-height: normal; 
    border: none; 
    background: transparent; 
}

3. IE 專用 Hack (不推薦，維護成本高)

.input-hack {
    box-sizing: border-box;
    height: 36px;
    line-height: 36px\9; /* IE8-9 只識別 */
    *line-height: 34px;  /* IE7 */
    _line-height: 36px;  /* IE6 */
    padding: 0 12px;
}

4. Normalize.css / Reset.css 統一基線

專案引入 normalize.css 可消除跨瀏覽器預設樣式差異，減少此類 Hack 需求。

驗證清單

1. IE11 / Edge (IE 模式) / Chrome / Firefox 實測。
2. 不同字體大小 (12px, 14px, 16px) 測試。
3. 含 placeholder 狀態測試。
4. 高度非固定 (min-height) 情況測試。