IE10 需相容檢視才能正常顯示：CSS 缺少寬高屬性導致版面崩壞

現象

頁面在 IE10 標準模式下版面錯亂，切換「相容性檢視」即正常。

常見原因

1. 關鍵 <div> 缺少寬高：IE10 標準模式嚴格遵循 CSS 盒模型，若容器無明確 width/height 或 min-width/min-height，子元素浮動/定位會導致父元素高度塌陷（0），版面重疊。
2. DOCTYPE 缺失或錯誤：無 <!DOCTYPE html> 觸發 Quirks Mode，行為不可預期。
3. CSS Hack/濾鏡：舊版專用 filter: progid:DXImageTransform... 在標準模式失效。

修正清單

1. 補上 <!DOCTYPE html> 作為文件第一行。
2. 為佈局容器設定明確寬高或 overflow:hidden 觸發 BFC。
3. 加入 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 強制最新渲染引擎（若仍需相容舊版可用 IE=EmulateIE9）。
4. 使用開發者工具 (F12) 選取錯亂元素，檢查 Computed Styles 是否有寬高。

代碼片段

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <style>
    .container { width: 100%; min-height: 400px; overflow: hidden; }
    .left { float: left; width: 200px; }
    .right { margin-left: 210px; }
  </style>
</head>
<body>...</body>
</html>

總結

IE10 相容檢視本質是退回 IE7/8 渲染引擎，寬容度高但非長久之計。修正 CSS 盒模型缺失、強制 Edge 模式，才是根治之道。