CSS inline-block 元素內含 p 標籤導致垂直對齊偏移的跨瀏覽器解決方案

現象：display: inline-block 的容器 .div2 內插入 <p> 後，容器向下偏移。安卓 Chrome 和 PC 瀏覽器加 overflow: hidden 可修復，但 iOS Safari 無效。

根本原因：基線對齊

• inline-block 元素默認 vertical-align: baseline。
• 容器內有文本/行內元素時，基線由**最後一行文本的基線**決定。
• 空容器基線為底部邊緣；含 <p> 容器基線為 p 文本基線 → 導致垂直位置差異。

徹底解決方案

1. 統一 vertical-align (推薦，最穩健)：
   .div2 { display: inline-block; vertical-align: top; } 或 middle、bottom。
   強制所有同級容器按同一基準對齊，消除基線差異。**全瀏覽器生效，含 iOS Safari。**
2. 容器 font-size: 0 + 子元素恢復：
   .div1 { font-size: 0; } .div2 { font-size: 14px; }
   消除行內框間隙與基線影響，但需注意 rem/em 單位繼承。
3. Flexbox 替代 (現代佈局首選)：
   .div1 { display: flex; } .div2 { flex: 0 0 80px; }
   完全避開 inline-block 基線問題，響應式更強。

為何 overflow: hidden 在 iOS 失效？

iOS Safari 對 inline-block 的基線計算有特殊渲染路徑，overflow 不觸發格式化上下文重置基線。vertical-align 是標準 CSS 規範定義的對齊屬性，兼容性最可靠。

最佳實踐代碼

.div1 { /* 父容器 */ }
.div2 { 
    width: 80px; height: 50px; 
    background: #cc0000; 
    display: inline-block; 
    vertical-align: top; /* 關鍵修復 */
}
.p1 { 
    width: 80px; text-align: center; 
    font-size: 15px; background: greenyellow; 
    margin: 0; /* 重置 p 默認邊距 */
}

採用 vertical-align: top 一行代碼解決跨平台對齊偏移，簡潔且符合標準。