360 瀏覽器兼容模式導航圖片與下拉菜單間隙問題排查

現象

IE9 正常，360 瀏覽器（兼容模式/IE7 內核）下導航圖片與下拉菜單出現垂直間隙，文字導航無此問題。

根因

• 360 兼容模式使用 **IE7 內核**，對 inline/inline-block 元素的基線對齊、行高解析與現代瀏覽器不一致。
• 圖片預設 vertical-align: baseline，字體下沉產生 3-5px 間隙。
• 下拉菜單 position: absolute 的 top 值若未精確設為父容器 height，會受行盒模型影響產生偏移。

修復方案

1. 圖片垂直對齊： img { vertical-align: top; } 或 vertical-align: middle; display: block;。
2. 父容器高度固定 + 菜單定位：

   .nav { height: 40px; position: relative; }
   .submenu { position: absolute; top: 40px; left: 0; }
   

3. 強制標準模式：頁面頂部添加 <!DOCTYPE html>，並在 HTTP 響應頭或 meta 標籤聲明 X-UA-Compatible: IE=Edge，引導 360 使用極速內核（Chrome 內核）。
4. CSS Hack 針對 IE7： *+html .submenu { top: 38px; }（不推薦，作為臨時兼容）。

驗證步驟

1. F12 開發者工具切換文檔模式至 IE7，觀察間隙是否復現。
2. 檢查 Computed Style 中 line-height、vertical-align 計算值。
3. 逐條應用修復，確認間隙消失且不影響現代瀏覽器。

核心原則：**顯式聲明高度與定位，消除行盒模型不確定性**。