兼容性處理核心原則

1. DOCTYPE 必須聲明：觸發標準模式，消除盒模型解析差異
2. CSS Reset 統一基線：*{margin:0;padding:0;} 解決默認內外邊距不一
3. 善用 !important 針對性修補：FF 支持，IE6/7 忽略，可用於區分樣式
4. 避免濫用 Hack：優先採用標準寫法，必要時再用 *、_ 針對 IE6/7

佈局與盒模型經典差異

1. Padding 撐開盒子

現象：FF 設置 padding 會增加元素寬高，IE（標準模式下）不會

方案：額外聲明 width/height 或使用 box-sizing: border-box（現代項目首選）

2. 垂直居中

技巧：line-height 等於容器高度 + vertical-align:middle（限單行文本）

3. 盒模型 2px 差異

div { margin: 30px !important; margin: 28px; }

IE 忽略 !important 取後值 28px；標準瀏覽器取 30px。順序不可顛倒。

常見樣式差異速查

問題	IE	Firefox/標準	解決方案
列表縮進	margin:0 清除所有	需 margin:0; padding:0; list-style:none	三屬性全寫
透明度	filter:alpha(opacity=60)	opacity:0.6	雙寫，opacity 置後
圓角	IE7- 不支持	-moz-border-radius	推薦 jQuery.corner 或 CSS3 PIE
游標手型	支持 hand、pointer	僅支持 pointer	統一用 pointer
字體關鍵字 small	16px	13px	顯式指定 14px 等確切值
行內元素間隙	顯示空格（~3px）	忽略換行/空格	浮動佈局或字體大小 0 技巧
雙線凹凸邊框	border:2px outset	-moz-border-*-colors	現代項目用 box-shadow 模擬

經典 IE Bug 修復

1. 雙邊距 Bug (IE6)

現象：浮動元素水平 margin 加倍

修復：display: inline;（不影響塊級特性）

#box { float:left; margin:5px; display:inline; }

2. 選擇器空格 Bug (IE6/7)

現象：p:first-letter{...} 失效，需 p:first-letter {...}（偽類後加空格）

原因：連字符導致解析器誤判，空格修正語法邊界

工程化建議

• 採用 **XHTML 1.0 Strict / HTML5** 標準編寫
• 減少 Table 佈局，採用語義化 HTML + CSS 佈局
• 優先參考 FF/Opera/Chrome 渲染（更貼近標準），再兼容 IE
• 引入 Normalize.css / Reset.css 統一基線
• 使用 Autoprefixer 自動添加廠商前綴