【文章內(nèi)容簡介】 需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個 DIV 里，你可以依次拆出多個 div，只 要在每個拆出的 div 里定義 MARGINRIGHT: auto。MARGINLEFT: auto。 就可以了。 3 盒模型不同解釋 . box{ width:600px。 //for w\idth:500px。 //for ff+ } box{ width:600px!important //for ff width:600px。 //for ff+ width /**/:500px。 //for } 4 浮動 ie 產(chǎn)生的雙倍距離 box{ float:left。 width:100px。 margin:0 0 0 100px。 //這種情況之下 IE 會產(chǎn)生 200px 的距離 display:inline。 //使浮動忽略 } 這里細說一下 block,inline 兩個元素 ,Block 元素的特點是 :總是在新行上開始 ,高度 ,寬度 ,行高 ,邊距都可以控制 (塊元素 )。Inline 元素的特點是 :和其他元素在同一行上 ,?不可控制 (內(nèi)嵌元素 )。 box{ display:block。 //可以為內(nèi)嵌元素模擬為塊元素 display:inline。 //實現(xiàn)同一行排列 的的效果 diplay:table。 5 IE 與寬度和高度的問題 9 IE 不認(rèn)得 min這個定義，但實際上它把正常的 width 和 height 當(dāng)作有 min 的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個值就不會變，如果只用minwidth 和 minheight 的話， IE 下面根本等于沒有設(shè)置寬度和高度。比如要設(shè)置背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣： box{ width: 80px。 height: 35px。}htmlbody box{ width: auto。 height: auto。 minwidth: 80px。 minheight: 35px。} 6 頁面的最小寬度 minwidth 是個非常方便的 CSS 命令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正確。但 IE 不認(rèn)得這個，而它實際上把 width 當(dāng)做最小寬度來使。為了讓這一命令在 IE 上也能用，可以把一個 div 放到 body 標(biāo)簽下，然后為 div 指定一個類： 然后 CSS 這樣設(shè)計： container{ minwidth: 600px。 width:e?xpression( 600? “600px”: “auto” )。 } 第一個 minwidth 是正常的；但第 2 行的 width 使用了 Javascript，這只有 IE 才認(rèn)得，這也會讓你的 HTML 文檔不太正規(guī)。它實際上通過 Javascript 的判斷來實現(xiàn)最小寬度。 7 清除浮動 .hackbox{ display:table。 //將對象作為塊元素級的表格顯示 } 或者 .hackbox{ clear:both。 } 或者加入 :after（偽對象） ,設(shè) 置在對象后發(fā)生的內(nèi)容，通常和 content 配合使用， IE 不支持此偽對象，非 Ie 瀏覽器支持，所以并不影響到 IE/WIN 瀏覽器。這種的最麻煩的 ?? box:after{ content: “.”。 display: block。 height: 0。 10 clear: both。 visibility: hidden。 } 8 DIV 浮動 IE 文本產(chǎn)生 3 象素的 bug 左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內(nèi)的文本會離左邊有 3px 的間距 . box{ float:left。 width:800px。} left{ float:left。 width:50%。} right{ width:50%。 } *html left{ marginright:3px。 //這句是關(guān)鍵 } HTML 代碼 DIV id=box DIV id=left/DIV DIV id=right/DIV /DIV 9 屬性選擇器 (這個不能算是兼容 ,是隱藏 css 的一個 bug) p[id]{}div[id]{} p[id]{}div[id]{} 這個對于 和 以下的版本都 隱藏 ,FF 和 OPera 作用 屬性選擇器和子選擇器還是有區(qū)別的 ,子選擇器的范圍從形式來說縮小了 ,屬性選擇器的范圍比較大 ,如 p[id]中 ,所有 p 標(biāo)簽中有 id 的都是同樣式的 . 10 IE 捉迷藏的問題 當(dāng) div 應(yīng)用復(fù)雜的時候每個欄中又有一些鏈接， DIV 等這個時候容易發(fā)生捉迷藏的問題。 有些內(nèi)容顯示不出來，當(dāng)鼠標(biāo)選擇這個區(qū)域是發(fā)現(xiàn)內(nèi)容確實在頁面。 解決辦法：對 layout 使用 lineheight 屬性 或者給 layout 使用固定高和寬。頁面結(jié)構(gòu)盡量簡單。 11 11 高度不適應(yīng) 高度不適應(yīng)是當(dāng)內(nèi)層對象的高度發(fā) 生變化時外層高度不能自動進行調(diào)節(jié)，特別是當(dāng)內(nèi)層對象使用 margin 或 paddign 時。例： div id=”box” pp 對象中的內(nèi)容 /p /div CSS： box {backgroundcolor:eee。 } box p {margintop: 20px。marginbottom: 20px。 textalign:center。 } 解決方法：在 P 對象上下各加 2 個空的 div 對象 CSS 代碼： .1{height:0px。overflow:hidden。}或者為 DIV 加上 border 屬性。 屏蔽 IE 瀏覽器（也就是 IE 下不顯示） *:lang(zh) select {font:12px !important。} /*FF,OP 可見 */ select:empty {font:12px !important。} /*safari 可見 */ 這里 select 是選擇符，根據(jù)情況更換。第二句是 MAC 上 safari 瀏覽器獨有的。 僅 IE7 識別 *+html {…} 當(dāng)面臨需要只針對 IE7 做樣式的時候就可以采用這個 HACK。 IE6 及 IE6 以下識別 * html {…} 這個地方要特別注意很多地主都寫了是 IE6 的 HACK 其實 同樣可以識別這個 HACK。其它瀏覽器不識別。 html/**/ body select {……} 這句與上一句的作用相同。 僅 IE6 不識別 select { display /*IE6 不識別 */:none。} 這里主要是通過 CSS 注釋分開一個屬性與值，流釋在冒號前。 僅 IE6 與 IE5 不識別 select/**/ { display /*IE6,IE5 不識別 */:none。} 12 這里與上面一句不同的是在選擇符與花括號之間多了一個 CSS 注釋。 僅 IE5 不識別 select/*IE5 不識別 */ { display:none。} 這一句是在上一句中去掉了屬性區(qū)的注釋。只有 IE5 不識別 盒模型解決方法 selct {width: 寬度 。 voicefamily :}。 voicefamily:inherit。 width:正確寬度 。} 盒模型的清除方法不是通過 !important 來處理的。這點要明確。 清除浮動 select:after {content:.。 display:block。 height:0。 clear:both。 visibility:hidden。} 在 Firefox 中，當(dāng)子級都為浮動時，那么父級的高度就無法完全的包住整個子級，那么這時用這個清除浮動的 HACK 來對父級做一次定義，那么就可以解決這個問題 。 截字省略號 select { otextoverflow:ellipsis。 textoverflow:ellipsis。 whitespace:nowrap。 overflow:hidden。 } 這個是在越出長度后會自行的截掉多出部分的文字，并以省 略號結(jié)尾，很好的一個技術(shù)。只是目前 Firefox 并不支持。 只有 Opera 識別 @media all and (minwidth: 0px){ select {……} } 針對 Opera 瀏覽器做單獨的設(shè)定。 以上都是寫 CSS 中的一些 HACK，建議遵循正確的標(biāo)簽嵌套 (div ul li 嵌套結(jié)構(gòu)關(guān)系 )，這樣可以減少你使用 Hack 的頻率，不要進入理解誤區(qū)，并不是一個頁面就需要很多的 hack 來保持多瀏覽器兼容 )，很多情況下也許一個 Hack 都不用也可以讓瀏覽器工作得非常好，這些都是用來解決局部的兼容性問題，如 果希望把兼容性的內(nèi)容也分離出來，不妨試一下下面的幾種過濾器。這些過濾器有的是寫在 CSS 中通過過濾器導(dǎo)入特別的樣式，也有的是寫在 HTML中的通過條件來鏈接或是導(dǎo)入需要的補丁樣式。 的過濾器，只有 可見 @media tty { i{content:。/* */}} @import 39。39。 /*。} }/* */ IE5/MAC 的過濾器，一般用不著 /**//*/ @import 。 /**/ 下面是 IE 的條件注釋，個人覺得用條件注釋 調(diào)用相應(yīng) Hack 是比較完美的多瀏覽器兼容的解決辦法。把需要 hack 的地方單獨放到一個文件里面，當(dāng)瀏覽器版本符合的時候就可以調(diào)用那個被 Hack 的樣式，這樣不僅使用起來非常方便，而且對于制作這個 CSS 本身來講，可 13 以更嚴(yán)格的觀察到是否有必要使用 hack，很多情況下，當(dāng)我本人寫 CSS 如果把全部代碼包括 Hack 都寫到一個 CSS 文件的時候的時候會很隨意，想怎么 Hack 就怎么 Hack，而你獨立出來寫的時候，你就會不自覺的考慮是否有必要 Hack，是先 Hack CSS？還是先把主 CSS里面的東西調(diào)整到盡可能的不需要 Hack？當(dāng)你僅用很少的 Hack 就讓很多瀏覽器很乖很聽話的時候，你是不是很有成就感呢？你知道怎么選擇了吧～～呵呵 IE 的 if 條件 Hack 自己可以靈活使用參看這篇 IE 條件注釋 Only IE 所有的 IE 可識別 只有 可以識別 Only IE + 包換 都可以識別 僅 IE6 可識別 Only IE 7/ IE6 以及 IE6 以下的 都可識別 Only IE 7/ 僅 IE7 可識別 Css 當(dāng)中有許多的東西不不按照某些規(guī)律來的話，會讓你很心煩，雖然你可以通過很 多的hack，很多的 !important 來控制它，但是你會發(fā)現(xiàn)長此以往你會很不甘心，看看許多優(yōu)秀的網(wǎng)站，他們的 CSS 讓 IE6,Ie7,Firefox,甚至 Safari,Opera 運行起來完美無缺是不是很羨慕？而他們看似復(fù)雜的模版下面使用的 Hack 少得可憐。其實你要知道 IE 和 Firefox 并不不是那么的不和諧，我們找到一定的方法，是完全可以讓他們和諧共處的。不要你認(rèn)為發(fā)現(xiàn)了 hack的辦法，你就掌握了一切，我們并不是 Hack 的奴隸。 div ul li 的嵌套順序 今天只講一個規(guī)則。就是 divulli的三角關(guān)系。我的經(jīng)驗就是 div在最外面，里面是ul，然后再是 li，當(dāng)然 li里面又可以嵌套 div什么的，但是并不建議你嵌套很多東西。當(dāng)你符合這樣的規(guī)則的時候，那些倒霉的，不聽話的間隙就不會在里面出現(xiàn)了，當(dāng)你僅僅是div里面放 li，而不用 ul的時候，你會發(fā)現(xiàn)你的間隙十分難控制，一般情況下， IE6 和IE7 會憑空多一些間距。但很多情況你來到下一行，間隙就沒了，但是前面的內(nèi)容又空了很大一塊，出現(xiàn)這種情況雖然你可以改變 IE 的 Margin，然后調(diào)整 Firefox 下面的 Padding，以便使得兩者顯示起來得效果很相似，但是你得 CSS 將變得臭長無比，你不得不多考慮更多可能出現(xiàn)這種問題補救措施，雖然你知道千篇一律來 Hack 它們，但是你會煩得要命。 具體嵌套寫法 14 遵循上面得嵌套方式， divulli/li/ul/div 然 后 在 CSS 里面告訴 ul {Margin:0px。Padding:0px。liststyle:none。}，其中 liststyle:none 是不讓 li標(biāo)記的最前方顯示圓點或者數(shù)字等目錄類型的標(biāo)記，因為 IE 和 Firefox 顯示