【正文】 , , {xxx:xxxx}的方式方便的整理出你要兼容的地方，而統(tǒng)一兼容。}，其中l(wèi)iststyle:none是不讓li 標(biāo)記的最前方顯示圓點(diǎn)或者數(shù)字等目錄類(lèi)型的標(biāo)記，因?yàn)镮E和Firefox顯示出來(lái)默認(rèn)效果有些不一樣。Padding:0px。 s c+ }% ]+ h4 k1 w具體嵌套寫(xiě)法 $ l | ]39。 Y( g39。但很多情況你來(lái)到下一行，間隙就沒(méi)了，但是前面的內(nèi)容又空了很大一塊，出現(xiàn)這種情況雖然你可以改變IE的Margin，然后調(diào)整Firefox下面的Padding，以便使得兩者顯示起來(lái)得效果很相似，但是你得CSS將變得臭長(zhǎng)無(wú)比，你不得不多考慮更多可能出現(xiàn)這種問(wèn)題補(bǔ)救措施，雖然你知道千篇一律來(lái)兼容它們，但是你會(huì)煩得要命。我的經(jīng)驗(yàn)就是div在最外面，里面是ul，然后再是li，當(dāng)然li里面又可以嵌套div什么的，但是并不建議你嵌套很多東西。 T( P　　今天只講一個(gè)規(guī)則。 y r Q7 W ]。 K R T: b% ` u。不要你認(rèn)為發(fā)現(xiàn)了兼容的辦法，你就掌握了一切，我們并不是兼容的奴隸。 m( {( O7 g) c$ t1 ( z K5 O1 [7 n6 [: I, P. H1 _　　Css 當(dāng)中有許多的東西不不按照某些規(guī)律來(lái)的話(huà)，會(huì)讓你很心煩，雖然你可以通過(guò)很多的兼容，很多的!important 來(lái)控制它，但是你會(huì)發(fā)現(xiàn)長(zhǎng)此以往你會(huì)很不甘心，看看許多優(yōu)秀的網(wǎng)站，他們的CSS讓IE6,Ie7,Firefox,甚至Safari,Opera運(yùn)行起來(lái)完美無(wú)缺是不是很羨慕？而他們看似復(fù)雜的模版下面使用的兼容少得可憐。 } w: [2 {。 3. /**/ 　　下面是IE的條件注釋?zhuān)瑐€(gè)人覺(jué)得用條件注釋調(diào)用相應(yīng)兼容是比較完美的多瀏覽器兼容的解決辦法。 /*。 G* N， 1. media tty { 2. i{content:。這些過(guò)濾器有的是寫(xiě)在 CSS中通過(guò)過(guò)濾器導(dǎo)入特別的樣式，也有的是寫(xiě)在HTML中的通過(guò)條件來(lái)鏈接或是導(dǎo)入需要的補(bǔ)丁樣式。 u4 V8 H0 Gamp。 } 針對(duì)Opera瀏覽器做單獨(dú)的設(shè)定。 n. y0 d7 C3 y( f/ Y只有Opera識(shí)別 1. media all and (minwidth: 0px){ select {……} u只是目前Firefox并不支持。 M }7 C6 F( p ]( V V) Q/ [7 l6 k。} 在Firefox中，當(dāng)子級(jí)都為浮動(dòng)時(shí)，那么父級(jí)的高度就無(wú)法完全的包住整個(gè)子級(jí)，那么這時(shí)用這個(gè)清除浮動(dòng)的HACK來(lái)對(duì)父級(jí)做一次定義，那么就可以解決這個(gè)問(wèn)題 。 clear:both。 display:block。 v, [ O3 h2 N, Q/ N2 。 39。} 盒模型的清除方法不是通過(guò)!important來(lái)處理的。 voicefamily:inherit。 ]: [4 h9 s9 z9 g6 ^7 \0 M5 N R7 |盒模型解決方法 1. selct {width:。 v* q} 這一句是在上一句中去掉了屬性區(qū)的注釋。 M39。 : N Z: H! Z W+ W8 i2 M僅IE6與IE5不識(shí)別 1. select/**/ { display /*IE6,IE5不識(shí)別*/:none。 / }5 N$ ^$ R k, I。 |( C9 q3 g$ Y4 ?1 E僅IE6不識(shí)別 1. select { display /*IE6不識(shí)別*/:none。 h j6 V5 S i$ u G C) Q* W select {……} 這句與上一句的作用相同。 1. html/**/ body {…} 。 l* SIE6及IE6以下識(shí)別 1. * html ! k! L3 ` z/ w9 S, qamp。 u39。第二句是MAC上safari瀏覽器獨(dú)有的。 !important。} /*FF 可見(jiàn)，特別聲明：由于Opera最新的更新，此句目前已經(jīng)成為FF的專(zhuān)用HACK*/ 2. select:empty {font:12px w* c, o7 X: }39。 G6 kamp。 k7 U39。 W( \5 Z, X6 y3 Z39。}或者為DIV加上border屬性。 } 解決方法：在P對(duì)象上下各加2個(gè)空的div對(duì)象CSS代碼：.1{height:0px。marginbottom: 20px。例： 1. div id=box 2. pp對(duì)象中的內(nèi)容/p 3. /div 4. CSS： 5. box {backgroundcolor:eee。 Oamp。 r9 U% _7 T v$ h z G% I i, M a　　解決辦法：對(duì)layout使用lineheight屬性 或者給layout使用固定高和寬。 m+ U) S W/ o. J) r3 x! M1 Z! B) V, Q1 f1 i N5 L39。 5 [/ S( E/ Q7 {$ D+ C7 Q C4 L { x% U4 Q3 p Q9 f$ G I% |$ B$ w Q/ g39。 O4 Q10 IE捉迷藏的問(wèn)題, c* E2 W L4 o F4 `5 p3 s! N6 B3 h% |* g% F! Q9 O39。 c, Y 12. //這句是關(guān)鍵 13. } HTML代碼： 1. DIV id=box 2. DIV id=left/DIV 3. DIV id=right/DIV 4. /DIV 9 屬性選擇器(這個(gè)不能算是兼容,是隱藏css的一個(gè)bug) 1. p[id]{}div[id]{} 2. p[id]{}div[id]{} 　　,FF和OPera作用。} 7. right{ 8. width:50%。} 4. left{ 5. float:left。 C: z　　左邊對(duì)象浮動(dòng)，右邊采用外補(bǔ)丁的左邊距來(lái)定位，右邊對(duì)象內(nèi)的文本會(huì)離左邊有3px的間距. 1. box{ 2. float:left。 O F d) p H+ uamp。 6. visibility: hidden。 4. height: 0。 1. box:after{ 2. content: “.”。 8. } 　　或者加入:after（偽對(duì)象）,設(shè)置在對(duì)象后發(fā)生的內(nèi)容，通常和content配合使用，IE不支持此偽對(duì)象，非Ie瀏覽器支持，所以并不影響到IE/WIN瀏覽器。 P( B7 \$ [* ~, c7 清除浮動(dòng) 1. .兼容box{ 2. display:table。 L$ [amp。 4. } 　　第一個(gè)minwidth是正常的；但第2行的width使用了Javascript，這只有IE才認(rèn)得，這也會(huì)讓你的HTML文檔不太正規(guī)。 t) n然后CSS這樣設(shè)計(jì)： 1. container{ 2. minwidth: 600px。但I(xiàn)E不認(rèn)得這個(gè)，而它實(shí)際上把 width當(dāng)做最小寬度來(lái)使。} 6 頁(yè)面的最小寬度 5 C7 ^6 h/ | T/ B8 ^+ e2 f。 minwidth: 80px。} 2. htmlbody box{ width: auto。要解決這個(gè)問(wèn)題，可以這樣： 1. box{ width: 80px。這樣問(wèn)題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個(gè)值就不會(huì)變，如果只用minwidth和minheight的話(huà)，IE下面根本等于沒(méi)有設(shè)置寬度和高度。 5 IE與寬度和高度的問(wèn)題 9 I+ l$ O, K8 r2 k: V。 //可以為內(nèi)嵌元素模擬為塊元素 2. display:inline。Inline元素的特點(diǎn)是:和其他元素在同一行上,…不可控制(內(nèi)嵌元素)。 //這種情況之下IE會(huì)產(chǎn)生200px的距離 2. display:inline。 width:100px。 //for ff+ width /**/:500px。 //for width:500px。 W M2 C9 C) d8 \7 o8 ~3 S39。 就可以了。 A/ V5 l3 y　　需要說(shuō)明的是，如果你想用這個(gè)方法使整個(gè)頁(yè)面要居中，建議不要套在一個(gè)DIV里，你可以依次拆出多個(gè)div，只要在每個(gè)拆出的div里定義MARGINRIGHT: auto。 s( W, t( `MARGINLEFT: auto。 d2 F, k4 _* 　　但在mozilla中不能居中。這個(gè)的意思就是在父級(jí)元素內(nèi)的內(nèi)容居中；對(duì)于IE這樣設(shè)定就已經(jīng)可以了。 D G G: e8 V39。 u. w1 i3 h } 說(shuō)明： 3 q$ ! z/ U} 2. center { MARGINRIGHT: auto。 V$ H2 css布局中的居中問(wèn)題0 j2 g% F8 X Q3 x, Tamp。 } /* IE*/ 那么在firefox下字體顏色顯示為333IE6下字體顏色顯示為666，IE7下字體顏色顯示為999。 } /* Moz */ 2. * html 1 { color: 666。 k6 r4 ?3 jamp。 a5 d) L6 f. J+ D6 Z1 針對(duì)firefox ie6 ie7的css樣式( I E n. I+ Hamp。 r 1 a1 [( l9 U ~/ m1 }0 d. tamp。 f) m9 ^。 F: V$ g 5 w3 f e　　在FF下，第3個(gè)屬性FF不認(rèn)識(shí)，所以它讀的是 height:100px。 a S+ K/ i3 ` e: A7 _ `4 m。 3. _height:150px。 　　介紹完了這三個(gè)兼容了，下面我們?cè)賮?lái)看看如何在一個(gè)樣式里分別給一個(gè)屬性定義IE6 IE7 FF專(zhuān)用的兼容，看下面的代碼，順序不能錯(cuò)哦： 1. height:100px。 3. 第二個(gè)兼容 IE6專(zhuān)用 4. _height:100px。 l, \ W6 |　　有一點(diǎn)邏輯思想的人都會(huì)知道可以用IE和FF的兼容結(jié)合起來(lái)使用，下面介紹三個(gè)兼容，例如：（適合新手，呵呵，高手就在這里路過(guò)吧。 e* V5 `/ b* f$ e。 1 {% kamp。暫時(shí)還沒(méi)找到IE7專(zhuān)用的兼容。 E2 {6 ?8 H) R% h4 H3 m2 q/ ^+ u. F39。呵呵！ 2 h0 t而兼容就是一種辦法，能讓你在一個(gè)CSS里面獨(dú)立的寫(xiě)支持不同瀏覽器的樣式。 r p2 b6 n P x7 b。 Q。 F U3 Q6 c! N) Z/ E　　7, 關(guān)于手形光標(biāo). cursor: pointer. 而hand 只適用于 s+ H. V5 R9 x0 L: w8 u$ W M$ Q% I+ ~( 7 m39。 Y6 U! |, h7 z a: Y8 t+ Xamp。 t E4 q F7 k3 O3 c J7 s4 mamp。 o5 H8 F　　3, 若需給 a 標(biāo)簽內(nèi)內(nèi)容加上 樣式, 需要設(shè)置 display: block。 N1 J: ]. S( x2 z6 l, y7 W3 c5 C( l: t$ \4 I/ q　　　2).水平居中. margin: 0 auto。 C5 t N 5 vamp。 j+ F8 Y0 S P4 h+ U5 j$ c f/ e1 `5 D3 D0 v: i3 k7 r2 e　　2, 居中問(wèn)題. $ Y7 W。 K　　1,