瀏覽器相容的設計
by 系統管理者, 2011-05-03 17:20, 人氣(2178)
由於不同瀏覽器對 css 的解釋會有一些差異，尤其是 寬度、高度、邊界等問題
例如
當樣式設定成 width:120px;padding:5px
在 IE 中 div 的寬度就是 120px
而 Firefox 中，div 的寬度卻是 130 px (width 120 + 左右的 padding 5px = 130px)
一般而言，為了間容於這兩種瀏覽器，我們會用 !important 來修飾，例如
width:115px !important;width:120px;padding:5px;
註: !important; 一定要在前面。
以上就是典型的瀏覽器相容的問題與解決方法
常見的 CSS 相容的問題列表如下：
1. DOCTYPE 影響 CSS 處理
2. margin auto
FF: div 設置 margin-left、margin-right 為 auto 時已經居中，IE 不行
FF: body 設置 text-align 時，div 需要設置 margin: auto (主要是 margin-left,margin-right) 方可居中
3. width / height
FF: 設置 padding 後，div 會增加 height 和 width，但 IE 不會
故需要用 !important 多設一個 height 和 width
4. 區隔瀏覽器
FF: 支援 !important，IE 則忽略
因此，可用 !important 為 FF 特別設置樣式
5. div 的垂直居中問題
vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然後插入文字，就垂直居中了。
缺點是要控制內容不要換行
6. 滑鼠游標
cursor: pointer 可以同時在 IE FF 中顯示游標手指狀， hand 僅 IE 可以