Chrome 與 IE 瀏覽器 Input 寬度不一致的兼容性解決方案

問題現象

同一個 <input> 元素在 <li> 容器中，Chrome 顯示寬度大於 IE，導致佈局錯位。開發者未顯式設置 input 寬度。

根本原因

瀏覽器對表單元素的默認樣式渲染存在差異：

• 默認寬度不同：Chrome、IE、Firefox 對 input[type=text] 的默認寬度計算方式不一（字符數、像素值、盒模型解析）。
• 盒模型差異：IE 歷史版本在 Quirks 模式下使用非標準盒模型（padding/border 計入 width），現代瀏覽器默認標準盒模型。
• 字體與行高影響：不同瀏覽器默認字體大小、行高、字體族系不同，影響基於 em/ex 的寬度計算。

解決方案

1. 顯式設置寬度（最直接有效）

input[type="text"] {
    width: 200px;        /* 固定像素寬度 */
    /* 或 */
    width: 100%;         /* 自適應父容器 */
    box-sizing: border-box; /* 統一盒模型，含 padding/border */
}

2. 重置瀏覽器默認樣式

/* 通用重置 */
input, select, textarea {
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    font-family: inherit;
    font-size: inherit;
    box-sizing: border-box;
}

3. 使用 Normalize.css / Reset.css

引入成熟的 CSS 重置庫，統一跨瀏覽器基準樣式：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css">

4. 設置 DOCTYPE 標準模式

確保頁面以標準模式渲染，避免 IE 進入 Quirks 模式：

<!DOCTYPE html>

最佳實踐建議

• 永不依賴默認樣式：所有表單元素必須顯式定義寬度、高度、內邊距、邊框、字體。
• 統一使用 box-sizing: border-box：全局或針對表單元素設置，消除盒模型差異。
• 響應式佈局用百分比或 Flex/Grid：避免固定像素導致的適配問題。
• 測試矩陣覆蓋：開發階段在目標瀏覽器（含 IE 兼容模式）實測驗證。

總結

瀏覽器間 Input 寬度不一致的核心原因是默認樣式差異。解決關鍵在於顯式聲明樣式屬性，特別是 width、box-sizing、font 等關鍵屬性。引入 Normalize.css 並遵循標準模式開發，可從根源消除 90% 以上的表單兼容性問題。