1、機關問題
問題：任何距離的數值ie可以不加機關，ff必須要求寫機關（0除外）
解決：寫全機關如padding:0px;
2、水準居中
問題：div裡的内容，ie預設為center，而ff預設left
解決：mairgin:0px auto;
3、高度問題
問題：如果設定了一個DIV的高度，當DIV裡實際内容大于所設高度，ie會自動拉伸以适應DIV容器大小，ff會固定DIV的告訴，超過部分超出DIV底線以外，出現和下面的内容重疊的現象
解決：控制恰當的高度，或者不寫，讓浏覽器自動調節高度，或者設定overflow:hidden;
4、clear:both;
問題：如果上面用float控制了n列DIV，下面ie會自動檢測自動排列，ff則可能很不老實，到處亂動
解決：float結束後的下一個标簽加clear:both;以結束float的控制
5、最大/小寬度問題
問題：min-width,max-width隻是ff的指令，如何讓ie實作同樣的效果
解決：ie不認識min-和max-，實際ie認為min-width、max-width和width效果一樣，可以用下面方法解決
#cctext{
min-width: 700px;
max-width: 1000px;
width:expression(document.body.clientWidth<700 ? "700px" : document.body.clientWidth>1000 ? "1000px" : "auto");
}
6、!important支援
問題：ff支援ie不支援
解決：無。ie會忽略。
7、遊标狀态
問題：cursor:hand;僅ie支援，顯示手指狀态
解決：使用cursor:pointer;ie和ff都支援
8、實際像素
IE/Opera：對象的實際寬度 = (margin-left) + width + (margin-right)
Firefox/Mozilla：對象的實際寬度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)
是以排列好及列的表格時ie和ff顯示寬度稍有差別
9、在mozilla firefox和IE中的BOX模型解釋不一緻導緻相差2px解決方法：
div{margin:30px!important;margin:28px;}
注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識别，但别的浏覽器可以識别。是以在IE下其實解釋成這樣：
div{maring:30px;margin:28px}
重複定義的話按照最後一個來執行，是以不可以隻寫margin:XXpx!important;
10、IE5和IE6的BOX解釋不一緻IE5下div{width:300px;margin:0 10px 0 10px;}div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他浏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改
div{width:300px!important;width :340px;margin:0 10px 0 10px}
，關于這個是什麼我也不太明白，隻知道IE5和firefox都支援但IE6不支援，如果有人了解的話，請告訴我一聲，謝了！：）
11、ul标簽在Mozilla中預設是有padding值的,而在IE中隻有margin有值是以先定義
ul{margin:0;padding:0;}
就能解決大部分問題
12、關于腳本，在xhtml1.1中不支援language屬性，隻需要把代碼改為
<script type="text/javascript">
就可以了
1,盒解釋器的不同解釋.
#box{ width:600px; //for ie6.0- w/idth:500px; //for ff+ie6.0}#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-} 2,在ie中隐藏css,使用子選擇器
html>body #box{ } 3,隻有ie識别
*html #box{ } 4,在ie/win有效而ie/max隐藏,使用反斜杠
/* / */ #box{ }
5,給ie單獨定義樣式 這裡更加詳細的說明
6,浮動ie産生的雙倍距離
#box{ float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE會産生200px的距離 display:inline; //使浮動忽略} 這裡細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,...不可控制(内嵌元素);
#box{ display:block; //可以為内嵌元素模拟為塊元素 display:inline; //實作同一行排列的的效果 diplay:table; //for ff,模拟table的效果} 7,for oprea only
@media all and (min-width:0px){/* opera */#box{ }} 8,IE與寬度和高度的問題
IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果隻用寬度和高度，
正常的浏覽器裡這兩個值就不會變，如果隻用min-width和min-height的話，IE下面根本等于沒有設定寬度和高度。
比如要設定背景圖檔，這個寬度是比較重要的。要解決這個問題，可以這樣：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;} 9,頁面的最小寬度
min-width是個非常友善的CSS指令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正确。但IE不認得這個，而它實際上把width當做最小寬度來使。為了讓這一指令在IE上也能用，可以把一個<div> 放到 <body> 标簽下，然後為div指定一個類：
然後CSS這樣設計：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實作最小寬度。
同樣的辦法也可以為IE實作最大寬度：
#container{min-width: 600px;max-width: 1200px;width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";} 10,清除浮動
.hackbox{ display:table; //将對象作為塊元素級的表格顯示}或者.hackbox{ clear:both;} 或者加入:after（僞對象）,設定在對象後發生的内容，通常和content配合使用，IE不支援此僞對象，非Ie 浏覽器支援，是以并不影響到IE/WIN浏覽器。-------這種的最麻煩的......
#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;} 11,DIV浮動IE文本産生3象素的bug
左邊對象浮動，右邊采用外更新檔的左邊距來定位，右邊對象内的文本會離左邊有3px的間距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //這句是關鍵} HTML代碼<div id="box"> <div id="left"></div> <div id="right"></div></div> 12,屬性選擇器(這個不能算是相容,是隐藏css的一個bug)
p[id]{}div[id]{} 這個對于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
屬性選擇器和子選擇器還是有差別的,子選擇器的範圍從形式來說縮小了,屬性選擇器的範圍比較大,如p[id]中,所有p标簽中有id的都是同樣式的.
待續... ![css僞類與僞元素差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)