.class{
background-color:# FFFF00;/*所有瀏覽器*/
* background-color:#00FF00;/*IE*/
_ background-color:# 00FFFF;/*IE6*/
}

@media all and(min-width:0){
.class{
background-color:#FF00FF; /*Opera */
} }/*只有Opera識別*/

@media all and (min-width:0){
.class{
background-color:#FF00FF; /*Opera和Sa */
html* .class{
background-color:# 808080; /*Sa*/
}
}}

注：這里所指代的 Safari 和 Opera 一般為最新版本。

2,、僅 Firefox 3 和 IE7 識別的 Hack

selector, x:-moz-any-link, x:default {
/* Firefox 3   and IE7 rules here */
}

 

 

 

 

可簡單解決IE與FF之間的兼容問題（保持FF,IE7,IE的順序）,，但這種方式貌似對加載有一定的影響 ！

Update2007-12-31 NND快被Opera個丫的折騰崩潰了:

.e {/*FF OP*/
background-color: #FF0000
}
html* .e{/*Sa IE7 OP*/
background-color:#FF00FF
}
*+html .e{
background-color:#000000;/*OP*/
*background-color:#0000FF;/*IE7*/
}
* html .e{/*IE6*/
background-color:#00FFFF
}

對于 IE8 beta1 可以嘗試下面的 Hack：

/*/ selector { … } /**/
此規(guī)則僅 IE8 beta1 識別,，而其他 A-grade 瀏覽器都不識別



>>>------我想分頁,！--這么長的文章,，在這里來個分頁多好啊,！哈哈-------<<<
Description:
IE支持自定義光標(biāo)文件cursor:url()
IE支持自定義滾動條顏色風(fēng)格
IE6中的select有永遠(yuǎn)處在最上的bug,而且css對select不起作用,。

在form中，IE支持label,，包括文字和圖片,；但是firefox不支持圖片的label，
點擊圖片不能讓label for的radio或者checkbox產(chǎn)生效果,。

IE和firefox都是支持onscroll事件的,，但是firefox中textarea對此事件不支持。

CSS方面,，IE中支持在CSS中嵌入expresion,，而Firefox不支持
firefox支擇相鄰子選擇符“>”，而IE6不支持（IE7支持）

firefox 對display的inline-block不支持,，而IE均支持,。


>>>------我想分頁！--這么長的文章,，在這里來個分頁多好?。」?------<<<

以下收藏自：puterjam's Blog
區(qū)別IE6與FF：
       background:orange;*background:blue;


區(qū)別IE6與IE7：
       background:green !important;background:blue;


區(qū)別IE7與FF：
       background:orange; *background:green;


區(qū)別FF,，IE7,，IE6：
       background:orange;*background:green !important;*background:blue;


注：IE都能識別*;標(biāo)準(zhǔn)瀏覽器(如FF)不能識別*；
IE6能識別*,，但不能識別 !important,
IE7能識別*,，也能識別!important;
FF不能識別*，但能識別!important;


IE6 IE7 FF
* √ √ ×
!important × √ √


--------------------------------------------------------------------------------
另外再補充一個,，下劃線"_",
IE6支持下劃線,，IE7和firefox均不支持下劃線,。(推薦)

于是大家還可以這樣來區(qū)分IE6,，IE7，firefox
: background:orange;*background:green;_background:blue;

注：不管是什么方法,，書寫的順序都是firefox的寫在前面,，IE7的寫在中間，IE6的寫在最后面,。

>>>------我想分頁,！--這么長的文章，在這里來個分頁多好??！哈哈-------<<<
這是國外摘來的一張CSS hack列表,，顯示了各瀏覽器對css hack的支持程度，對制作兼容網(wǎng)頁非常有幫助,。




>>>------我想分頁,！--這么長的文章，在這里來個分頁多好??！哈哈-------<<<

找了一些相關(guān)的CSS HACK后，總結(jié)的幾個方法,。

IE7的hack
IE7 修復(fù)了很多 bug,，也增加了對一些選擇符的支持，所以現(xiàn)在諸如 *html {} 和 html>body {} 等針對 IE 隱藏或顯示的 hack 都會在 IE7 中失效,。雖然 CSS Hack 不推薦使用,，條件注釋才是萬無一失的過濾器，但是條件注釋只能出現(xiàn)在 HTML 中,，CSS Hack 還是有用武之地的,。Nanobot 發(fā)現(xiàn)了一些針對 IE7 的 CSS Hack，具體就是：

>body
html*
*+html

這三種寫法,，其中前兩種都是不合法的 CSS 寫法,，在標(biāo)準(zhǔn)兼容瀏覽器中被被忽略，但是 IE7 卻不這么認(rèn)為,。對于 >body ,，它會將缺失的選擇符用全局選擇符 * 代替，也就是將其處理成了 *>body,，而且不光對于 > 選擇符,，+,~ 選擇符中這個現(xiàn)象也存在。對于 html* ,，由于 html 和 * 之間沒有空格,，所以也是一種 CSS 語法錯誤，但 IE7 不會忽略,，而是錯誤地認(rèn)為這里有一個空格,。對于第三種 *+html，IE7 認(rèn)為 html 前面的 DTD 聲明也是一個元素,，所以 html 會被選中,，這三種方法中只有這一種方法是合法的 CSS 寫法，也就是說可以通過校驗器的驗證,，因此也是作者推薦的 hack 用法,。

引用的其他朋友的總結(jié)：

屏蔽IE瀏覽器（也就是IE下不顯示）
*:lang(zh) select {font:12px !important;}
select:empty {font:12px !important;}
這里select是選擇符，根據(jù)情況更換,。第二句是MAC上safari瀏覽器獨有的,。

僅IE7識別
*+html {…}
當(dāng)面臨需要只針對IE7做樣式的時候就可以采用這個HACK,。

IE6及IE6以下識別
* html   {…}
這個地方要特別注意很多地主都寫了是IE6的HACK其實IE5.x同樣可以識別這個HACK。其它瀏覽器不識別,。
html/**/ >body   select {……}
這句與上一句的作用相同,。
用法：
*html #box{…}


僅IE6不識別
#box { display /*IE6不識別*/:none;}
這里主要是通過CSS注釋分開一個屬性與值，流釋在冒號前,。



僅IE6與IE5不識別
#box/**/ { display /*IE6,IE5不識別*/:none;}
這里與上面一句不同的是在選擇符與花括號之間多了一個CSS注釋,。


僅IE5不識別
select/*IE5不識別*/ { display:none;}
這一句是在上一句中去掉了屬性區(qū)的注釋。只有IE5不識別
盒模型解決方法
selct {width:IE5.x寬度; voice-family :”\”}\””; voice-family:inherit; width:正確寬度;}
盒模型的清除方法不是通過!important來處理的,。這點要明確,。

清除浮動
select:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，當(dāng)子級都為浮動時,，那么父級的高度就無法完全的包住整個子級,，那么這時用這個清除浮動的HACK來對父級做一次定義，那么就可以解決這個問題,。

節(jié)字省略號
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
這個是在越出長度后會自行的截掉多出部分的文字,，并以省略號結(jié)尾，很好的一個技術(shù),。只是目前Firefox并不支持,。

只有Opera識別
@media all and (min-width: 0px){ select {……} }
針對Opera瀏覽器做單獨的設(shè)定。

IE5.x的過濾器,，只有IE5.x可見
@media tty {
i{content:”\”;}} @import ‘ie5win.css’;

IE5/MAC的過濾器,，一般用不著
>>>------我想分頁！--這么長的文章,，在這里來個分頁多好?。」?------<<<


IE與Firefox的CSS兼容隨記



　　CSS對瀏覽器器的兼容性具有很高的價值,，通常情況下IE和Firefox存在很大的解析差異,，這里介紹一下兼容要點。

　　常見兼容問題：

　　1.DOCTYPE 影響 CSS 處理

　　2.FF: div 設(shè)置 margin-left, margin-right 為 auto 時已經(jīng)居中, IE 不行

　　3.FF: body 設(shè)置 text-align 時, div 需要設(shè)置 margin: auto(主要是 margin-left,margin-right) 方可居中

　　4.FF: 設(shè)置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設(shè)一個 height 和 width

　　5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設(shè)置樣式

　　6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字,，就垂直居中了,。缺點是要控制內(nèi)容不要換行

　　7.cursor: pointer 可以同時在 IE FF 中顯示游標(biāo)手指狀， hand 僅 IE 可以

　　8.FF: 鏈接加邊框和背景色,，需設(shè)置 display: block, 同時設(shè)置 float: left 保證不換行,。參照 menubar, 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯位, 若不設(shè) height, 可以在 menubar 中插入一個空格,。

　　9.在mozilla firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法：
div{margin:30px!important;margin:28px;}
　　注意這兩個margin的順序一定不能寫反,，據(jù)阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別,。所以在IE下其實解釋成這樣：
div{maring:30px;margin:28px}
　　重復(fù)定義的話按照最后一個來執(zhí)行,，所以不可以只寫margin:XXpx!important;

　　10.IE5 和IE6的BOX解釋不一致
　　IE5下

 

 

　　div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px,，而在IE6和其他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
　　關(guān)于這個/**/是什么我也不太明白,，只知道IE5和firefox都支持但I(xiàn)E6不支持,，如果有人理解的話，請告訴我一聲,，謝了?。海?br>
　　11.ul標(biāo)簽在Mozilla中默認(rèn)是有padding值的,而在IE中只有margin有值所以先定義

　　就能解決大部分問題

　　注意事項：

　　1、float的div一定要閉合,。

　　例如：(其中floatA,、floatB的屬性已經(jīng)設(shè)置為float:left;)

　　這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排,。
　　這段代碼在IE中毫無問題,，問題出在FF。原因是NOTfloatC并非float標(biāo)簽,，必須將float標(biāo)簽閉合,。
　　在

　　之間加上

　　這個div一定要注意聲明位置，一定要放在最恰當(dāng)?shù)牡胤?，而且必須與兩個具有float屬性的div同級,，之間不能存在嵌套關(guān)系，否則會產(chǎn)生異常,。
　　并且將clear這種樣式定義為為如下即可：

　　此外,，為了讓高度能自動適應(yīng)，要在wrapper里面加上overflow:hidden;
　　當(dāng)包含float的box的時候,，高度自動適應(yīng)在IE下無效,，這時候應(yīng)該觸發(fā)IE的layout私有屬性(萬惡的IE啊,！)用zoom:1;可以做到,，這樣就達(dá)到了兼容。
　　例如某一個wrapper如下定義：

　　2,、margin加倍的問題,。

　　設(shè)置為float的div在ie下設(shè)置的margin會加倍。這是一個ie6都存在的bug,。
　　解決方案是在這個div里面加上display:inline;
例如：

<#div id="imfloat"></#div>


　　相應(yīng)的css為

　　3,、關(guān)于容器的包涵關(guān)系

　　很多時候，尤其是容器內(nèi)有平行布局,，例如兩,、三個float的div時，寬度很容易出現(xiàn)問題。在IE中,，外層的寬度會被內(nèi)層更寬的div擠破,。一定要用Photoshop或者Firework量取像素級的精度。

　　4,、關(guān)于高度的問題

　　如果是動態(tài)地添加內(nèi)容,，高度最好不要定義。瀏覽器可以自動伸縮,，然而如果是靜態(tài)的內(nèi)容,，高度最好定好。（似乎有時候不會自動往下?lián)伍_,，不知道具體怎么回事）