IE6 IE7 IE8三大瀏覽器的CSS兼容速查表
IE每個新版本的推出，就不可避免地在IE的各個主要版本之間產生兼容問題，盡管IE8推出已有時日，使用IE6的用戶仍然相當可觀。本文以速查手冊的形式介紹CSS（2.1和3）在IE6，IE7，IE8三個版本之間的兼容情況。
IE6,IE7,IE8 CSS兼容速查表
現代Web設計與開發越來越看重瀏覽器兼容問題，IE每個新版本的推出，都在CSS的標準化方面前進一大步，同時，也就不可避免地在IE的各個主要版本之間產生兼容問題，盡管IE8推出已有時日，使用IE6的用戶仍然相當可觀。本文以速查手冊的形式介紹CSS（2.1和3）在IE6，IE7，IE8三個版本之間的兼容情況。
1.居中問題
div里的內容，IE默認為居中，而Firefox默認為左對齊
可以嘗試增加代碼margin:auto
2.高度問題
兩上下排列或嵌套的div，上面的div設置高度(height)，如果div里的實際內容大于所設高度，在Firefox中會出現兩個div重疊的現象；但在IE中，下面的div會自動給上面的div讓出空間
所以為避免出現層的重疊，高度一定要控制恰當，或者干脆不寫高度，讓他自動調節，比較好的方法是height:100%;
但當這個div里面一級的元素都float了的時候，則需要在div塊的***，閉和前加一個沉底的空div，對應CSS是：
.float_bottom{clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}
3.clear:both
不想受到float浮動的，就在div中寫入clear:both;
4.IE浮動margin產生的雙倍距離
- #box{
- float:left;
- width:100px;
- margin:000100px;//這種情況之下IE會產生200px的距離
- display:inline;//使浮動忽略
- }
5.padding問題
Firefox設置padding后，div會增加height和width，但IE不會（*標準的XHTML1.0定義dtd好像一致了）
高度控制恰當，或嘗試使用height:100%;
寬度減少使用padding
但根據實際經驗，一般Firefox和IE的padding不會有太大區別，div的實際寬=width+padding，所以div寫全width和padding，width用實際想要的寬減去padding定義
6.div嵌套時y軸上padding和marign的問題
Firefox里y軸上子div到父div的距離為父padding+子marign
IE里y軸上子div到父div的距離為父padding和子marign里大的一個
Firefox里y軸上父padding=0且border=0時，子div到父div的距離為0，子marign作用到父div外面
7.padding，marign，height，width的傻瓜式解決技巧
注意是技巧，不是方法：
寫好標準頭
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
高盡量用padding，慎用margin，height盡量補上100%，父級height有定值子級height不用100%，子級全為浮動時底部補個空clear:both的div
寬盡量用margin，慎用padding，width算準實際要的減去padding。#p#
列表類
1.ul標簽在Firefox中默認是有padding值的，而在IE中只有margin有值
先定義ul{margin:0;padding:0;}
2.ul和ol列表縮進問題
消除ul、ol等列表的縮進時，樣式應寫成:{list-style:none;margin:0px;padding:0px;}
顯示類
1.display:block,inline兩個元素
- display:block;//可以為內嵌元素模擬為塊元素
- display:inline;//實現同一行排列的的效果
- display:table;//forFirefox,模擬table的效果
◆display:block塊元素，元素的特點是：
總是在新行上開始；
高度，行高以及頂和底邊距都可控制；
寬度缺省是它的容器的100%，除非設定一個寬度
<div>，<p>，<h1>，<form>，<ul>和<li>是塊元素的例子
◆isplay:inline就是將元素顯示為行內元素，元素的特點是：
和其他元素都在一行上；
高，行高及頂和底邊距不可改變；
寬度就是它的文字或圖片的寬度，不可改變。
<span>，<a>，<label>，<input>，<img>，<strong>和<em>是inline元素的例子
2.鼠標手指狀顯示
全部用標準的寫法cursor:pointer;
背景、圖片類
1.background顯示問題
全部注意補齊width，height屬性
2.背景透明問題
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
IE:filter:alpha(opacity=10);
Firefox:opacity:0.6;
Firefox:-moz-opacity:0.10;
***兩個都寫，并將opacity屬性放在下面
【編輯推薦】
