ASP.NET 網頁顏色排版亂碼：瀏覽器相容模式差異 (IE vs Chrome)，CSS 需加廠商前綴

截圖顯示同一頁面在 **IE 兼容模式 (Trident)** 正常，在 **Chrome (Blink)** 跑版。原因：CSS 使用了非標準屬性或缺乏廠商前綴。

常見差異點

• Flexbox/Grid 早期語法需 -webkit-、-ms- 前綴。
• box-sizing、border-radius 早期版本需前綴。
• IE 不支援 CSS 變數、calc() 早期語法不同。

修正策略

1. 使用 **Autoprefixer** (PostCSS/Webpack/Vite 插件) 自動補全前綴。
2. 引入 **Normalize.css** 或 **Reset.css** 統一基準樣式。
3. 針對 IE 11 以下採用 **優雅降級**：<!--[if IE]><link rel="stylesheet" href="ie.css"><![endif]-->。
4. 開發階段**多瀏覽器同步測試** (BrowserStack / 本地虛擬機)。

快速檢查

在 Chrome DevTools → Elements → Styles 面板，搜尋「黃色警告三角」即可定位缺前綴屬性。

**結論**：非程式邏輯錯誤，純 CSS 相容性問題，補全前綴與 Reset 即可統一呈現。