【正文】 hand 僅 IE 可以 ul標(biāo)簽在FF中默認(rèn)是有padding值的,而在IE中只有margin默認(rèn)有值,所以先定義 ul{margin:0。padding:0。}就能解決大部分問題 6. FORM標(biāo)簽 這 個(gè)標(biāo)簽在IE中,將會(huì)自動(dòng)margin一些邊距,而在FF中margin則是0,因此,如果想顯示一致,所以最好在css中指定margin和 padding,針對上面兩個(gè)問題,我的css中一般首先都使用這樣的樣式ul,form{margin:0。padding:0。}給定義死了,所以后 面就不會(huì)為這個(gè)頭疼了. 7. BOX模型解釋不一致問題 在FF和IE 中的BOX模型解釋不一致導(dǎo)致相差2px解決方法：div{margin:30px!important。margin:28px。} 注意這兩個(gè) margin的順序一定不能寫反， important這個(gè)屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實(shí)解釋成這樣： div {maring:30px。margin:28px}重復(fù)定義的話按照最后一個(gè)來執(zhí)行，所以不可以只寫margin:xx px!important。 box{ width:600px。 //for w\idth:500px。 //for ff+} box{ width:600px!important //for ff width:600px。 //for ff+ width /**/:500px。 //for } (這個(gè)不能算是兼容,是隱藏css的一個(gè)bug) p[id]{}div[id]{} ,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標(biāo)簽中有id的都是同樣式的. !important。 如果實(shí)在沒有辦法解決一些細(xì)節(jié)問題,”!important”會(huì)自動(dòng)優(yōu)先解析, .tabd1{ background:url(/res/images/up/) norepeat 0px 0px !important。 /*Style for FF*/ background:url(/res/images/up/) norepeat 1px 0px。 /* Style for IE */} 值得注意的是，一定要將xxxx !important 這句放置在另一句之上，上面已經(jīng)提過 ,FF的默認(rèn)值問題 或 許你一直在抱怨為什么要專門為IE和FF寫不同的CSS，為什么IE這樣讓人頭疼，然后一邊寫css，一邊咒罵那個(gè)可惡的M$ 準(zhǔn)支持方面，IE并沒有我們想象的那么可惡，關(guān)鍵在于IE和FF的默認(rèn)值不一樣而已，掌握了這個(gè)技巧，你會(huì)發(fā)現(xiàn)寫出兼容FF和IE的css并不是那么困 難，或許對于簡單的css，你完全可以不用”!important”這個(gè)東西了。 我們都知道，瀏覽器在顯示網(wǎng)頁的時(shí)候，都會(huì)根據(jù)網(wǎng)頁的 css樣式表來決定如何顯示，但是我們在樣式表中未必會(huì)將所有的元素都進(jìn)行了具體的描述，當(dāng)然也沒有必要那么做，所以對于那些沒有描述的屬性，瀏覽器將采 用內(nèi)置默認(rèn)的方式來進(jìn)行顯示，譬如文字，如果你沒有在css中指定顏色，那么瀏覽器將采用黑色或者系統(tǒng)顏色來顯示，div或者其他元素的背景，如果在 css中沒有被指定，瀏覽器則將其設(shè)置為白色或者透明，等等其他未定義的樣式均如此。所以有很多東西出現(xiàn)FF和IE顯示不一樣的根本原因在于它們的默認(rèn)顯 示不一樣，而這個(gè)默認(rèn)樣式該如何顯示我知道在w3中有沒有對應(yīng)的標(biāo)準(zhǔn)來進(jìn)行規(guī)定，因此對于這點(diǎn)也就別去怪罪IE了。標(biāo)準(zhǔn)瀏覽器中固定高度值的容器是不會(huì)象IE6里那樣被撐開的,那我又想固定高度,又想能被撐開需要怎樣設(shè)置呢？辦法就是去掉height設(shè)置minheight:200px。 這里為了照顧不認(rèn)識minheight的IE6 可以這樣定義:{height:auto!important。height:200px。minheight:200px。}眾所周知IE中直接使用 wordwrap:breakword 就可以了, FF中我們使用JS插入amp。10。的方法來解決style type=text/css!div { width:300px。 wordwrap:breakword。 border:1px solid red。}/stylediv id=ffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/divscrīpt type=text/javascrīpt/* ![CDATA[ */function toBreakWord(el, intLen){ var ōbj=(el)。 var strContent=。 var strTemp=。 while(intLen){ strTemp+=(0,intLen)+amp。10。 strContent=(intLen,)。 } strTemp+=amp。10。+strContent。 =strTemp。}if( amp。amp。 !) toBreakWord(ff, 37)。/* ]] *//scrīpt?xml version= encoding=gb2312?!DOCTYPE html PUBLIC //W3C//DTD XHTML Strict//EN meta equiv=ContentType content=text/html。 charset=gb2312 /style type=text/css!div { cursor:pointer。 width:200px。 height:200px。 border:10px solid red }/stylediv ōnclick=alert()讓FireFox與IE兼容/div問 題的差別在于容器的整體寬度有沒有將邊框（border）的寬度算在其內(nèi),這里IE6解釋為200PX ,而FF則解釋為220PX,那究竟是怎么導(dǎo)致的 問題呢？大家把容器頂部的xml去掉就會(huì)發(fā)現(xiàn)原來問題出在這,頂部的申明觸發(fā)了IE的qurks mode,關(guān)于qurks mode、 standards mode的相關(guān)知識powered by ,IE7,FF 出來了，對CSS的支持又有新問題。瀏覽器多了，網(wǎng)頁兼容性更差了，疲于奔命的還是我們 ，找來了下面這篇文章： 現(xiàn)在我大 部分都是用!important來hack，對于ie6和firefox測試可以正常顯示，但是ie7對!important可以正確解釋，會(huì)導(dǎo)致頁面沒 按要求顯示！下面是三個(gè)瀏覽器的兼容性收集. 第一種，是CSS HACK的方法 height:20px。 /*For Firefox*/ *height:25px。 /*For IE7 amp。 IE6*/ _height:20px。 /*For IE6*/ 注意順序。 這樣也屬于CSS HACK，不過沒有上面這樣簡潔。 example { color: 333。 } /* Moz */ * html example { color: 666。 } /* IE6 */ *+html example { color: 999。 } /* IE7 */ 第二種，是使用IE專用的條件注釋 !其他瀏覽器 link rel=stylesheet type=text/css href=:// / ![if IE 7] ! 適合于IE7 link rel=stylesheet type=text/css href=:// / ![endif] ![if lte IE 6] ! 適合于IE6及一下 link rel=stylesheet type=text/css href=:// / ![endif] 第三種，css filter的辦法，以下為經(jīng)典從國外網(wǎng)站翻譯過來的。. 新建一個(gè)css樣式如下： item { width: 200px。 height: 200px。 background: red。 } 新建一個(gè)div,并使用前面定義的css的樣式： div id=itemsome text here/div 在body表現(xiàn)這里加入lang屬性,中文為zh： body lang=en 現(xiàn)在對div元素再定義一個(gè)樣式： *:lang(en) item{ background:green !important。 } 這樣做是為了用!important覆蓋原來的css樣式,由于:,所以對這句話不會(huì)有任何作用,但是很不幸地的是,safari同樣不支持此屬性,所以需要加入以下css樣式： item:empty { background: green !important } :empty選擇器為css3的規(guī)范,盡管safari并不支持此規(guī)范,但是還是會(huì)選擇此元素,不管是否此元素存在,現(xiàn)在綠色會(huì)現(xiàn)在在除ie各版本以外的瀏覽器上。 對IE6和FF的兼容可以考慮以前的!important 個(gè)人比較喜歡用第一種，簡潔，兼容性比較好什么是瀏覽器HACK：當(dāng)我們使用不同的瀏覽器（Firefox IE7 IE6）訪問同一個(gè)網(wǎng)站，或者頁面的時(shí)候，會(huì)出現(xiàn)一些不兼容的問題，有的顯示出來正常，有的顯示出來不正常，我們在編寫CSS的時(shí)候會(huì)很惱火，剛修復(fù)了這 個(gè)瀏覽器的問題，結(jié)果另外一個(gè)瀏覽器卻出了新問題。而HACK就是一種辦法，能讓你在一個(gè)CSS里面獨(dú)立的寫支持不同瀏覽器的樣式。這下就和諧了。呵 呵！powered by 最近微軟發(fā)布的IE7瀏覽器的兼容性確實(shí)給一些網(wǎng)頁制作人員添加了一個(gè)沉重的負(fù)擔(dān)，雖然IE7已經(jīng)走向標(biāo)準(zhǔn)化，但還是有許多和FF不同的地方，所 以需要用到IE7的HACK，有許多朋友問過IE7的HACK是什么，其實(shí)我也不知道。暫時(shí)還沒找到IE7專用的HACK。除了前面那片文章，《針對 firefox ie6 ie7的css樣式》中的hack方式也是很好用的。有一點(diǎn)邏輯思想的人都會(huì)知道可以用IE和FF的HACK結(jié)合起來使用，下面介紹三個(gè)HACK，例如：（適合新手，呵呵，高手就在這里路過吧。）程序代碼第一個(gè)HACK，IE FF 所有瀏覽器 公用（其實(shí)也不算是HACK）height:100px。第二個(gè)HACK IE6專用_height:100px。第三個(gè)HACK IE6 IE7公用*height:100px。介紹完了這三個(gè)HACK了，下面我們再來看看如何在一個(gè)樣式里分別給一個(gè)屬性定義IE6 IE7 FF專用的HACK，看下面的代碼，順序不能錯(cuò)哦：程序代碼height:100px。 通用*height:120px。 _height:150px。 下面我簡單解釋一下各瀏覽器怎樣理解這三個(gè)屬性：在FF下，第3個(gè)屬性FF不認(rèn)識，所以它讀的是 height:100px。在IE7下，第三個(gè)屬性IE7不認(rèn)識，所以它讀第2個(gè)屬性，又因?yàn)榈诙€(gè)屬性覆蓋了第一個(gè)屬性，所以IE7最終讀出的是第2個(gè)屬性 *height:120px。在IE6下，三個(gè)屬性IE6都認(rèn)識，所以三個(gè)屬性都可以讀取，又因?yàn)榈谌齻€(gè)屬性覆蓋掉前2個(gè)屬性，所以IE6最終讀取的是第三個(gè)屬性。1 針對firefox ie6 ie7的css樣式現(xiàn)在大部分都是用!important來hack，對于ie6和firefox測試可以正常顯示，但是ie7對!important可以正確解 釋，會(huì)導(dǎo)致頁面沒按要求顯示！找到一個(gè)針對IE7不錯(cuò)的hack方式就是使用“*+html”，現(xiàn)在用IE7瀏覽一下，應(yīng)該沒有問題了現(xiàn)在寫一個(gè)CSS可 以這樣：1 { color: 333。 } /* Moz */* html 1 { color: 666。 } /* IE6 */*+html 1 { color: 999。 } /* IE7 */那么在firefox下字體顏色顯示為333，IE6下字體顏色顯示為666，IE7下