區別不同瀏覽器的CSS hack寫法：
區別IE6與FF：
background:orange;*background:blue;
區別IE6與IE7：
background:green !important;background:blue;
區別IE7與FF：
background:orange; *background:green;
區別FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;
注：IE都能識別*;標準瀏覽器(如FF)不能識別*；
IE6能識別*，但不能識別 !important,
IE7能識別*，也能識別!important;
FF不能識別*，但能識別!important;
| IE6 | IE7 | FF | |
| * | √ | √ | × |
| !important | × | √ | √ |
------------------------------------------------------
另外再補充一個，下劃線"_",
IE6支持下劃線，IE7和firefox均不支持下劃線。
| IE6 | IE7 | FF | |
| * | √ | √ | × |
| !important | × | √ | √ |
| _ | √ | × | × |
于是大家還可以這樣來區分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;
注：不管是什么方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最后面。
一、CSS HACK
以下兩種方法幾乎能解決現今所有HACK.
1, !important
隨著IE7對!important的支持, !important 方法現在只針對IE6的HACK.(注意寫法.記得該聲明位置需要提前.)
<stylegt;
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</stylegt;
2, IE6/IE77對FireFox
*+html 與 *html 是IE特有的標簽, firefox 暫不支持.而*+html 又為 IE7特有標簽.
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */
}
</style>
注意:
*+html 對IE7的HACK 必須保證HTML頂部有如下聲明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
二、萬能 float 閉合(非常重要!)
關于 clear float 的原理可參見 [How To Clear Floats Without Structural Markup]
將以下代碼加入Global CSS 中,給需要閉合的div加上 ><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>
關于閉合浮動元素（clearing float）的方法現在已經很多了，個人認為簡單實用的方法就是使用:after偽類動態的嵌入一個用于清除浮動的元素，可惜代碼量太大了，看上去不夠簡潔。
現在看到有個方法超級簡單。介紹一下這個方法。原文在：http://annevankesteren.nl/2005/03/clearing-floats
這 一方面的原理是，外圍元素之所以不能很好的延伸，問題出在了overflow上，因為overflow不可見（見W3C的解釋）。現在只要將給外圍元素添 加一個“overflow:auto”，就可以解決問題，結果是除了IE，真的可以解決。下來就要解決ID的問題了，再加上“_height:1%”，這 個問題就完全解決了。
下面的例子作為比較
1、沒有閉合浮動元素；2、非IE下閉合浮動元素；3、完全閉合元素。相關代碼如下：
XHTML代碼：
新聞熱點
疑難解答
