【正文】 來講，可以更嚴(yán)格的觀察到是否有必要使用兼容，很多情況下，當(dāng)我本人寫CSS如果把全部代碼包括兼容都寫到一個(gè) CSS文件的時(shí)候的時(shí)候會(huì)很隨意，想怎么兼容就怎么兼容，而你獨(dú)立出來寫的時(shí)候，你就會(huì)不自覺的考慮是否有必要兼容，是先兼容 CSS？還是先把主CSS里面的東西調(diào)整到盡可能的不需要兼容？當(dāng)你僅用很少的兼容就讓很多瀏覽器很乖很聽話的時(shí)候，你是不是很有成就感呢？你知道怎么選 擇了吧～～呵呵 IE的if條件兼容 自己可以靈活使用參看這篇IE條件注釋 Only IE 所有的IE可識(shí)別 Only IE + 僅IE6可識(shí)別 Only IE 7/ Only IE 7/ 僅IE7可識(shí)別 Css 當(dāng)中有許多的東西不不按照某些規(guī)律來的話，會(huì)讓你很心煩，雖然你可以通過很多的兼容，很多的!important 來控制它，但是你會(huì)發(fā)現(xiàn)長(zhǎng)此以往你會(huì)很不甘心，看看許多優(yōu)秀的網(wǎng)站，他們的CSS讓IE6,Ie7,Firefox,甚至Safari,Opera運(yùn)行起 來完美無缺是不是很羨慕？而他們看似復(fù)雜的模版下面使用的兼容 少得可憐。 只有Opera識(shí)別 media all and (minwidth: 0px){ select {……} } 針對(duì)Opera瀏覽器做單獨(dú)的設(shè)定。當(dāng)你符合這樣的規(guī)則的時(shí)候，那些倒霉的，不聽話的間隙就不會(huì)在里面出現(xiàn)了，當(dāng)你僅僅是div里面放li，而不 用ul的時(shí)候，你會(huì)發(fā)現(xiàn)你的間隙十分難控制，一般情況下，IE6和IE7會(huì)憑空多一些間距。} }/* */ IE5/MAC的過濾器，一般用不著 /**//*/ import 。 } 這個(gè)是在越出長(zhǎng)度后會(huì)自行的截掉多出部分的文字，并以省略號(hào)結(jié)尾，很好的一個(gè)技術(shù)。 display:block。} 這一句是在上一句中去掉了屬性區(qū)的注釋。 IE6及IE6以下識(shí)別 * html {…} 。 } 解決方法：在P對(duì)象上下各加2個(gè)空的div對(duì)象CSS代碼：.1{height:0px。 有些內(nèi)容顯示不出來，當(dāng)鼠標(biāo)選擇這個(gè)區(qū)域是發(fā)現(xiàn)內(nèi)容確實(shí)在頁面。nbp。 //將對(duì)象作為塊元素級(jí)的表格顯示 } 或者 .兼容box{ clear:both。 minheight: 35px。 5 IE與寬度和高度的問題 IE不認(rèn)得min這個(gè)定義，但實(shí)際上它把正常的width和height當(dāng)作有min的情況來使。 width:100px。 ” 需要說明的是，如果你想用這個(gè)方法使整個(gè)頁面要居中，建議不要套在一個(gè)DIV里，你可以依次拆出多個(gè)div，只要在每個(gè)拆出的div里定義MARGINRIGHT: auto。 2 css布局中的居中問題 主要的樣式定義如下： body {TEXTALIGN: center。 _height:150px。暫時(shí)還沒找到IE7專用的兼容。 margintop: 24px。 } .clearfix { display:inlineblock。 /* IE6 */ } /style 2, IE6/IE77對(duì)FireFox from 針對(duì)firefox ie6 ie7的css樣式 *+html 與 *html 是IE特有的標(biāo)簽, firefox *+html 又為 IE7特有標(biāo)簽. 代碼: style wrapper { width: 120px。因?yàn)閮?yōu)先級(jí)相同且想沖突的屬性設(shè)置后一個(gè)會(huì)覆蓋掉前一個(gè)，所以書寫的次序是很重要的。*height:200px。很多兼容性問題都是因?yàn)闉g覽器對(duì)標(biāo)簽的默認(rèn)屬性解析不同造成的，只要我們稍加設(shè)置都能輕松地解決這些兼容問題。 height:200px。在用float布局并有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的bug。　　備注：這種情況一般出現(xiàn)在我們?cè)O(shè)置小圓角背景的標(biāo)簽里?！　∨龅筋l率:100%　　解決方案：CSS里稍有改動(dòng)就亂七八糟。在大多數(shù)情況下，我們的需求是，無論用戶用什么瀏覽器來查看我們的網(wǎng)站或者登陸我們的系統(tǒng)，都應(yīng)該是統(tǒng)一的顯示效果。修改好了這個(gè)瀏覽器又亂了另一個(gè)瀏覽器。 *　　備注：這個(gè)是最常見的也是最易解決的一個(gè)瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會(huì)用通配符*來設(shè)置各個(gè)標(biāo)簽的內(nèi)外補(bǔ)丁是0?！　g覽器兼容問題四：行內(nèi)屬性標(biāo)簽，設(shè)置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug　　問題癥狀：IE6里的間距比超過設(shè)置的間距　　碰到幾率：20%　　解決方案：在display:block。　　瀏覽器兼容問題五：圖片默認(rèn)有間距　　問題癥狀：幾個(gè)img標(biāo)簽放在一起的時(shí)候，有些瀏覽器會(huì)有默認(rèn)的間距，加了問題一中提到的通配符也不起作用。當(dāng)內(nèi)容小于一個(gè)值（如300px）時(shí)。CSS　　IE6瀏覽器在讀到height:300px的時(shí)候會(huì)認(rèn)為高時(shí)300px；繼續(xù)往下讀，他也認(rèn)識(shí)*heihgt， 所以當(dāng)IE6讀到*height:200px的時(shí)候會(huì)覆蓋掉前一條的相沖突設(shè)置，認(rèn)為高度是200px。 IE6 專用 *height: 100px。} /* ie7 fixed, 注意順序 */ /style 注意: *+html 對(duì)IE7的兼容 必須保證HTML頂部有如下聲明： 代碼: !DOCTYPE HTML PUBLIC //W3C//DTD HTML Transitional//EN　 二、萬能 float 閉合(非常重要!) 可以用這個(gè)解決多個(gè)div對(duì)齊時(shí)的間距不對(duì)， 關(guān)于 clear float 的原理可參見 [How To Clear Floats Without Structural Markup] 將以下代碼加入Global CSS 中,給需要閉合的div加上 class=”clearfix” 即可,屢試不爽. 代碼: style /* Clear Fix */ .clearfix:after { content:.。(當(dāng)然不是萬能) 3, 若需給 a 標(biāo)簽內(nèi)內(nèi)容加上 樣式, 需要設(shè)置 display: block。 } /* IE7 */ *+html .submitbutton { margintop: 21px。） 程序代碼 第一個(gè)兼容，IE FF 所有瀏覽器 公用（其實(shí)也不算是兼容） height:100px。 在IE6下，三個(gè)屬性IE6都認(rèn)識(shí)，所以三個(gè)屬性都可以讀取，又因?yàn)榈谌齻€(gè)屬性覆蓋掉前2個(gè)屬性，所以IE6最終讀取的是第三個(gè)屬性。 } 說明： 首先在父級(jí)元素定義TEXTALIGN: center。 3 盒模型不同解釋. box{ width:600px。 //使浮動(dòng)忽略} 這里細(xì)說一下block,inline兩個(gè)元素,Block元素的特點(diǎn)是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素)。要解決這個(gè)問題，可以這樣： box{ width: 80px。為了讓這一命令在IE上也能用，可以把一個(gè)div 放到 body 標(biāo)簽下，然后為div指定一個(gè)類： 然后CSS這樣設(shè)計(jì)： container{ minwidth: 600px。 display: block。} left{ float:left。 11 高度不適應(yīng) 高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié)，特別是當(dāng)內(nèi)層對(duì)象使用 margin 或paddign 時(shí)。 屏蔽IE瀏覽器（也就是IE下不顯示） *:lang(zh) select {font:12px !important。 僅IE6不識(shí)別 select { display /*IE6不識(shí)別*/:none。 voicefamily:inherit。 visibility:hidden。 以上都是寫CSS中的一些兼容，建議遵循正確的標(biāo)簽嵌套(div ul li 嵌套結(jié)構(gòu)關(guān)系)，這樣可以減少你使用兼容的頻率，不要進(jìn)入理解誤區(qū)，并不是一個(gè)頁面就需要很多的兼容來保持多瀏覽器兼容)，很多情況下也許一個(gè)兼容都不用 也可以讓瀏覽器工作得非常好，這些都是用來解決局部的兼容性問題，如果希望把兼容性的內(nèi)容也分離出來，不妨試一下下面的幾種過濾器。其實(shí)你要知道IE 和 Firefox 并不不是那么的不和諧，我們找到一定的方法，是完全可以讓他們和諧共處的。list style:none。 ， media tty { i{content:。 div ul li 的嵌套順序 今天只講一個(gè)規(guī)則。因此這樣不需要做任何手腳，你的IE和IEFirefox顯示出來的東西(外距，間距，高度，寬度) 就幾乎沒什么區(qū)別了，也許細(xì)心的你會(huì)在某一個(gè)時(shí)刻發(fā)現(xiàn)一、兩個(gè)象素的差別，但那已經(jīng)很完美了，不需要你通過調(diào)整大片的CSS來控制它們的顯示了，你愿意， 你可以僅僅兼容一兩個(gè)地方，而且通常這種兼容可以適應(yīng)各種地方，不需要你重復(fù)在不同的地方調(diào)試不同的兼容方式–減輕你的煩 overflow:hidden。 /*。我的經(jīng)驗(yàn)就是div在最外面，里面 是ul，然后再是li，當(dāng)然li里面又可以嵌套div什么的，但是并不建議你嵌套很多 東西。嘗試一下吧，再也不要亂嵌套了，雖然在Div+CSS的方式下你幾乎可以想怎么嵌套 就怎么嵌套，但是按照上面的規(guī)律你將輕松很多，從而事半功倍！去掉ie有默認(rèn)最低高度div style=height:2px。但是現(xiàn)在，我們還是需要處理CSS在不同瀏覽器下的兼容性。css布局中的居中問題　　主要的樣式定義如下：　　body {TEXTALIGN: center。MARGINLEFT: auto。 //for }浮動(dòng)ie產(chǎn)生的雙倍距離　　box{ float:left。 //實(shí)現(xiàn)同一行排列的的效果 diplay:table。 minwidth: 80px。但第2行的width使用了Javascript，這只有IE才認(rèn)得，這也會(huì)讓你的HTML文檔不太正規(guī)。 clear: both。 //這句是關(guān)鍵}　　HTML代碼屬性選擇器(這個(gè)不能算是兼容,是隱藏css的一個(gè)bug)　　p[id]{}div[id]{}　　,FF和OPera作用　　屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標(biāo)簽中有id的都是同樣式的.IE捉迷藏的問題　　當(dāng)div應(yīng)用復(fù)雜的時(shí)候每個(gè)欄中又有一些鏈接，DIV等這個(gè)時(shí)候容易發(fā)生捉迷藏的問題。 }　　解決方法：在P對(duì)象上下各加2個(gè)空的div對(duì)象CSS代碼：.1{height:0px。 body {margin:0。 border:1px solid red。div { height:auto!important。 body { scrollbarfacecolor:f6f6f6。 top:50%。這里使用百分比絕對(duì)定位，與外補(bǔ)丁負(fù)值的方法，負(fù)值的大小為其自身寬度高度除以二八、firefox瀏覽器中嵌套div標(biāo)簽的居中問題的解決方法假定有如下情況：auto。我們就可以根據(jù)這個(gè)來針對(duì)不同的瀏覽器來寫不同的CSS。*+\0 _color:66CCCC。 _color:66CCCC。 ie67文本居中，嵌套的塊元素也會(huì)居中ff /opera /safari /ie8文本會(huì)居中，嵌套塊不會(huì)居中解決：塊元素設(shè)置 marginleft:auto。height:100px。7. td高度的問題問題：table中td的寬度都不包含border的寬度，但是oprea和ff中td的高度包含了border的高度解決：解決：設(shè)置p的margin:0px，再設(shè)置div的paddingtop和paddingbottom9. IE67圖片下面有空隙的問題問題：塊元素中含有圖片時(shí)，ie67中會(huì)出現(xiàn)圖片下有空隙解決：margin:0 100px。 左邊層采用浮動(dòng)，右邊沒有采用浮動(dòng)，這時(shí)在ie6中兩層之間就會(huì)產(chǎn)生3像素的間距解決：右邊層也采用浮動(dòng) 在子元素中設(shè)置 都支持border:1px solid 333。39。top:5px。 IE6/IE7的這個(gè)Bug可以通過給li中的div設(shè)置verticalalign:top|middle|bottom解決。 li中有a且設(shè)置display:block時(shí)，ie6中列表間會(huì)出現(xiàn)空隙解決：li中加display:inline。zoom:1。 li設(shè)置為浮動(dòng)，后面的li緊隨其后，不能換行解決：為這個(gè)ul定義合適的寬高給包含這個(gè)ul 的父div定義合適的寬高。 overflow: hidden。 點(diǎn)擊超鏈接后，hover、active樣式?jīng)]有效果解決：34. 禁用中文輸入法的問題問題： 隱藏滾動(dòng)條解決：只有ie67支持body scroll=no除ie67不支持 body{overflow:hidden}所有瀏覽器 html{overflow:hidden}37. 去除鏈接虛線邊框的問題問題：當(dāng)點(diǎn)擊超鏈接后，ie6/7/8 css濾鏡只在ie中有效，F(xiàn)irefox, Safari(WebKit), Opera只能夠設(shè)置透明，