CSS 怪異現象：div 高度設置 45px 在 Chrome 服務器訪問變 46px 的根因與修復

問題重現

• 本地雙擊 HTML 文件：height: 45px 正常渲染。
• 通過 localhost:8080 訪問：Chrome 顯示 46px，Firefox/IE 正常。
• 僅當高度末位為 5（如 45, 55, 65px）時出現，其他值正常。

根因分析

Chrome 默認 line-height 為 normal（約 1.2 倍字體大小），當容器無內容時，行高參與高度計算。服務器環境可能加載不同字體或用戶代理樣式表，導致行高計算產生 1px 差異。具體為：45px + line-height 產生的額外 1px = 46px。

解決方案

.top {
    height: 45px;
    line-height: 45px; /* 顯式設置等於 height */
    /* 或 */
    line-height: 1;    /* 重置為最小 */
    /* 或 */
    font-size: 0;      /* 消除行高影響 */
}

推薦在 CSS Reset 中統一設置：

* { margin: 0; padding: 0; line-height: 1.5; } /* 根據設計稿調整 */

驗證

修改後在 Chrome 開發者工具 Computed 面板查看 height 穩定為 45px，問題解決。