DIV CSS在不同IE版本和FF以及Chrome中的相容性差異解決方法(推薦)
一些內容比之前
為了方便自己查詢，省得每次遇到問題都要滿世界搜，轉篇實用的：DIV+CSS 與不同 IE 版本等的相容性。
一、!important (功能有限)
隨著 IE7 對 !important 的支援， !important 方法現在只針對 IE6 的相容。（注意寫法，記得該宣告位置需要提前。）例如：
#example {
width: 100px !important; /* IE7+FF */
width: 200px; /* IE6 */
}
二、CSS HACK 的方法（新手可以看看，高手就當路過吧）
首先需要知道的是：
所有瀏覽器 通用 height: 100px;
IE6 專用 _height: 100px;
IE7 專用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;
例如：
#example { height:100px; } /* FF */
* html #example { height:200px; } /* IE6 */
*+html #example { height:300px; } /* IE7 */
下面的這種方法比較簡單
舉幾個例子：
1、IE6 - IE7+FF
#example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
其實這個用上面說的第一種方法也可以
#example {
height:100px !important; /* FF+IE7 */
height:200px; /* IE6 */
}
2、IE6+IE7 - FF
#example {
height:100px; /* FF */
*height:200px; /* IE6+IE7 */
}
3、IE6+FF - IE7
#example {
height:100px; /* IE6+FF */
*+height:200px; /* IE7 */
}
4、IE6 IE7 FF 各不相同
#example {
height:100px; /* FF */
_height:200px; /* IE6 */
*+height:300px; /* IE7 */
}
或：
#example {
height:100px; /* FF */
*height:300px; /* IE7 */
_height:200px; /* IE6 */
}
需要注意的是，程式碼的順序一定不能顛倒了，要不又前功盡棄了。因為瀏覽器在解釋程式的時候，如果重名的話，會用後面的覆蓋前面的，就象給變數賦值一個道理，所以我們把通用的放前面，越專用的越放後面。
解釋一下4的程式碼：
讀程式碼的時候，第一行 height:100px; 大家都通用，IE6 IE7 FF 都顯示100px。到了第二行*height:300px; FF不認識這個屬性，IE6 IE7 都認，所以FF還顯示100px，而 IE6 IE7 把第一行得到的height屬性給覆蓋了，都顯示300px。到了第三行 _height:200px; 只有IE6認識，所以 IE6 就又覆蓋了在第二行得到的 height，最終顯示200px。這樣，三個瀏覽器都有自己的height屬性了，各玩各的去吧。
這樣說要是你還不明白，要麼你去撞牆，要麼我去!不過還是你去比較好。
哦，差點忘了說了：
*+html 對 IE7 的相容 必須保證HTML頂部有如下宣告：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
三、使用IE專用的條件註釋
<!--其他瀏覽器 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!-- 適合於IE7 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<!-- 適合於IE6及以下 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
貌似要編三套 css，我還沒用過，先粘過來再說
IE 的 if 條件 Hack
1. <!--[if !IE]><!--> 除IE外都可識別 <!--<![endif]-->
2. <!--[if IE]> 所有的IE可識別 <![endif]-->
3. <!--[if IE 5.0]> 只有IE5.0可以識別 <![endif]-->
4. <!--[if IE 5]> 僅IE5.0與IE5.5可以識別 <![endif]-->
5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以識別 <![endif]-->
6. <!--[if IE 6]> 僅IE6可識別 <![endif]-->
7. <!--[if lt IE 6]> IE6以及IE6以下版本可識別 <![endif]-->
8. <!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->
9. <!--[if IE 7]> 僅IE7可識別 <![endif]-->
10. <!--[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]-->
11. <!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->注:gt = Great Then 大於
> = > 大於號
lt = Less Then 小於
< = < 小於號
gte = Great Then or Equal 大於或等於
lte = Less Then or Equal 小於或等於
四、css filter的辦法（據作者稱是從國外某經典網站翻譯過來的說）
新建一個css樣式如下：
#item {
width: 200px;
height: 200px;
background: red;
}
新建一個div,並使用前面定義的css的樣式：
<div >some text here</div>
在body表現這裡加入 lang 屬性，中文為zh：
<body lang="en">
現在對div元素再定義一個樣式：
*:lang(en) #item{
background:green !important;
}
這樣做是為了用 !important 覆蓋原來的 css 樣式，由於:lang 選擇器 ie7.0 並不支援，所以對這句話不會有任何作用，於是也達到了 ie6.0下同樣的效果，但是很不幸地的是，safari 同樣不支援此屬性，所以需要加入以下 css 樣式：
#item:empty {
background: green !important
}
:empty選擇器為 css3 的規範，儘管 safari 並不支援此規範，但是還是會選擇此元素，不管是否此元素存在，現在綠色會現在在除 ie 各版本以外的瀏覽器上。
五、FLOAT 閉合（clearing float）
網頁在某些瀏覽器上顯示錯位很多時候都是因為使用了 float 浮動而沒有真正閉合，這也是 div 無法自適應高度的一個原因。如果父 div 沒有設 float 而其子div卻設了 float 的話,父div無法包住整個子 DIV，這種情況一般出現在一個父 DIV 下包含多個子 DIV。解決辦法：
1、給父 DIV 也設上 float (不要罵我，我知道是廢話)
2、在所有子 DIV 後新加一個空 DIV (不推薦，有些瀏覽器可以看見空 DIV 產生的空隙)
比如：
.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}
<div>
<div></div>
<div></div>
<div></div>
</div>
3、萬能 float 閉合
將以下程式碼加入Global CSS 中,給需要閉合的div加上 class=”clearfix” 即可,屢試不爽.
程式碼:
<style>
/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>
:after（偽物件）,設定在物件後發生的內容，通常和 content 配合使用，IE 不支援此偽物件，非 Ie 瀏覽器支援，所以並不影響到IE/WIN瀏覽器。這種的最麻煩。
4、overflow:auto（剛看到的，極力推薦）
只要在父 DIV 的CSS中加上 overflow:auto 就搞定。
舉例：
.parent{width:100px;overflow:auto}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
<div>
<div></div>
<div></div>
</div>
作者原話：原理是，外圍元素之所以不能很好的延伸，問題出在了 overflow 上，因為 overflow 不可見（見W3C的解釋）。現在只要將給外圍元素新增一個“overflow:auto”，就可以解決問題，結果是除了IE，真的可以解決。下來就要解決IE的問題了，再加上“_height:1%”，這個問題就完全解決了。
我試了一下，其實不加"_height:1%“在IE下也行，留著吧。
六、需要注意的一些相容細節
1, FF 下給 div 設定 padding 後會導致 width 和 height 增加(DIV的實際寬度=DIV寬+Padding), 但IE不會.
解決辦法：給DIV設定IE、FF兩個寬度，在IE的寬度前加上IE特有標記" * "號。
2, 頁面居中問題.
body {TEXT-ALIGN: center;} 在IE下足夠了，但 FF 下失效。
解決辦法：加上"MARGIN-RIGHT: auto; MARGIN-LEFT: auto; "
3, 有的時候在IE6上看見一些奇怪的間隙，可我們高度明明設好了呀。
解決辦法：試試在有空隙的DIV上加上"font-size:0px;"
4, 關於手形游標. cursor: pointer. 而hand 只適用於 IE.
5, 浮動IE6產生的雙倍距離
#box{ float:left;
width:100px;
margin:0 0 0 100px;
}
這種情況之下IE6會產生200px的距離
解決辦法：加上 display:inline，使浮動忽略
這裡細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,…不可控制(內嵌元素);
#box{ display:block; //可以為內嵌元素模擬為塊元素 display:inline; //實現同一行排列的的效果
6 頁面的最小寬度
min-width是個非常方便的CSS命令，它可以指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器裡這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等於沒有設定寬度和高度。比如要設定背景圖片，這個寬度是比較重要的。
解決辦法：為了讓這一命令在IE上也能用，可以把一個<div> 放到 <body> 標籤下，然後為div指定一個類：
然後CSS這樣設計：
#container{
min-width: 600px;
width:e-xpression(document.body.clientWidth < 600? “600px”: “auto” );
}
第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，這也會讓你的HTML文件不太正規。它實際上通過Javascript的判斷來實現最小寬度。
7、UL和FORM標籤的padding與margin
ul標籤在FF中預設是有padding值的,而在IE中只有margin預設有值。FORM標籤在IE中,將會自動margin一些邊距,而在FF中margin則是0；
解決辦法：css中首先都使用這樣的樣式ul,form{margin:0;padding:0;}給定義死了,後面就不會為這個頭疼了.
8 ,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>
針對上面這段程式碼，下面說一下我的理解：
第一、只要right定義了width屬性，在FF下絕對就會兩行顯示
第二、兩個width都定義為百分比的話，就算都為100%在IE下也會一行顯示。所以上面那句所謂“這句是關鍵”根本沒用，不加也在一行，除非你width定義的是數值才用得上。
所以說上面這段程式碼其實用處不大，至少在FF下不行。其實只要只定義left的width就行了，right不定義width就不管在IE還是FF 下都能成功，但這樣的話父DIV BOX並沒有真正的包含LEFT和RIGHT兩子DIV,可以用我上面說的第5種辦法解決。最簡單的辦法就是在RIGHT中加上float:left就 OK了，真磨嘰！
9,截字省略號
.hh { -o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:
nowrapoverflow:hidden;
}
這個是在越出長度後會自行的截掉多出部分的文字，並以省略號結尾。技術是好技術，很多人都喜歡亂用，但注意 Firefox 並不支援
附一篇：http://blog.csdn.net/goodshot/article/details/44309539