【文章內(nèi)容簡介】 字體顏色顯示為999。2 css布局中的居中問題主要的樣式定義如下：body {TEXTALIGN: center。}center { MARGINRIGHT: auto。 MARGINLEFT: auto。 }說明：首先在父級元素定義TEXTALIGN: center。這個的意思就是在父級元素內(nèi)的內(nèi)容居中；對于IE這樣設定就已經(jīng)可以了。但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上“MARGINRIGHT: auto。MARGINLEFT: auto。 ”需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個DIV里，你可以依次拆出多個div，只要在每個拆出的div里定義MARGINRIGHT: auto。MARGINLEFT: auto。 就可以了。3 盒模型不同解釋.box{width:600px。//for w\idth:500px。//for ff+}box{width:600px!important//for ffwidth: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與寬度和高度的問題IE不認得min這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的 瀏覽器里這兩個值就不會變，如果只用minwidth和minheight的話，IE下面根本等于沒有設置寬度和高度。比如要設置背景圖片，這個寬度 是比較重要的。要解決這個問題，可以這樣：box{ width: 80px。 height: 35px。}htmlbody box{ width: auto。 height: auto。 minwidth: 80px。 minheight: 35px。}6 頁面的最小寬度minwidth是個非常方便的CSS命令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上 把 width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個div 放到 body 標簽下，然后為div指定一個類：然后CSS這樣設計：container{minwidth: 600px。width:e?xpression( 600? “600px”: “auto” )。}第一個minwidth是正常的；但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規(guī)。它實際上通過Javascript的判斷來實現(xiàn)最小寬度。7 清除浮動.hackbox{display:table。//將對象作為塊元素級的表格顯示}或者.hackbox{clear:both。}或者加入:after（偽對象）,設置在對象后發(fā)生的內(nèi)容，通常和content配合使用，IE不支持此偽對象，非Ie 瀏覽器支持，所以并不影響到IE/WIN瀏覽器。這種的最麻煩的……box:after{content: “.”。display: block。height: 0。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。//這句是關鍵}HTML代碼DIV id=boxDIV id=left/DIVDIV id=right/DIV/DIV9 屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)p[id]{}div[id]{}p[id]{}div[id]{},FF和OPera作用屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標簽中有id的都是同樣式的.10 IE捉迷藏的問題當div應用復雜的時候每個欄中又有一些鏈接，DIV等這個時候容易發(fā)生捉迷藏的問題。有些內(nèi)容顯示不出來，當鼠標選擇這個區(qū)域是發(fā)現(xiàn)內(nèi)容確實在頁面。解決辦法：對layout使用lineheight屬性 或者給layout使用固定高和寬。頁面結(jié)構(gòu)盡量簡單。11 高度不適應高度不適應是當內(nèi)層對象的高度發(fā)生變化時外層高度不能自動進行調(diào)節(jié)，特別是當內(nèi)層對象使用margin 或paddign 時。例：div id=”box”pp對象中的內(nèi)容/p/divCSS：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 {…}當面臨需要只針對IE7做樣式的時候就可以采用這個HACK。IE6及IE6以下識別* html {…}。其它瀏覽器不識別。html/**/ body select {……}這句與上一句的作用相同。僅IE6不識別select { display /*IE6不識別*/:none。}這里主要是通過CSS注釋分開一個屬性與值，流釋在冒號前。僅IE6與IE5不識別select/**/ { display /*IE6,IE5不識別*/:none。}這里與上面一句不同的是在選擇符與花括號之間多了一個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中，當子級都為浮動時，那么父級的高度就無法完全的包住整個子級，那么這時用這個清除浮動的HACK來對父級做一次定義，那么就可以解決這個問題 。截字省略號select { otextoverflow:ellipsis。 textoverflow:ellipsis。 whitespace:nowrap。 overflow:hidden。 }這個是在越出長度后會自行的截掉多出部分的文字，并以省略號結(jié)尾，很好的一個技術。只是目前Firefox并不支持。只有Opera識別@media all and (minwidth: 0px){ select {……} }針對Opera瀏覽器做單獨的設定。以上都是寫CSS中的一些HACK，建議遵循正確的標簽嵌套(div ul li 嵌套結(jié)構(gòu)關系)，這樣可以減少你使用Hack的頻率，不要進入理解誤區(qū)，并不是一個頁面就需要很多的hack來保持多瀏覽器兼容)，很多情況下也許一個 Hack都不用也可以讓瀏覽器工作得非常好，這些都是用來解決局部的兼容性問題，如果希望把兼容性的內(nèi)容也分離出來，不妨試一下下面的幾種過濾器。這些過 濾器有的是寫在CSS中通過過濾器導入特別的樣式，也有的是寫在HTML中的通過條件來鏈接或是導入需要的補丁樣式。，@media tty {i{content:。/* */}} @import 39。39。 /*。}}/* */IE5/MAC的過濾器，一般用不著/**//*/@import 。/**/下面是IE的條件注釋，個人覺得用條件注釋調(diào)用相應 Hack是比較完美的多瀏覽器兼容的解決辦法。把需要hack的地方單獨放到一個文件里面，當瀏覽器版本符合的時候就可以調(diào)用那個被Hack的樣式，這樣 不僅使用起來非常方便，而且對于制作這個CSS本身來講，可以更嚴格的觀察到是否有必要使用hack，很多情況下，當我本人寫CSS如果把全部代碼包括 Hack都寫到一個CSS文件的時候的時候會很隨意，想怎么Hack就怎么Hack，而你獨立出來寫的時候，你就會不自覺的考慮是否有必要Hack，是先 Hack CSS？還是先把主CSS里面的東西調(diào)整到盡可能的不需要Hack？當你僅用很少的Hack就讓很多瀏覽器很乖很聽話的時候，你是不是很有成就感呢？你知 道怎么選擇了吧～～呵呵IE的if條件Hack 自己可以靈活使用參看這篇IE條件注釋Only IE所有的IE可識別Only IE +僅IE6可識別Only IE 7/Only IE 7/僅IE7可識別IEIEFF 與兼容性有關的特性CSS HACK代碼:所有瀏覽器 通用height: 100px。IE6 專用_height: 100px。powered by IE6 專用*height: 100px。IE7 專用*+height: 100px。IEFF 共用height: 100px !important（優(yōu)先級）。一、CSS HACK以下兩種方法幾乎能解決現(xiàn)今所有HACK.1, !important (不是很推薦，用下面的一種感覺最安全)隨著IE7對!important的支持, !important 方法現(xiàn)在只針對IE6的HACK.(.)代碼:stylewrapper {width: 100px!important。 /* IE7+FF */width: 80px。 /* IE6 */}/style2, IE6/IE77對FireFox from 針對firefox ie6 ie7的css樣式*+html 與 *html 是IE特有的標簽, firefox *+html 又為 IE7特有標簽.代碼:stylewrapper { width: 120px。 } /* FireFox */*html wrapper { width: 80px。} /* ie6 fixed */*+html wrapper { width: 60px。} /* ie7 fixed, 注意順序 *//style注意:*+html 對IE7的HACK 必須保證HTML頂部有如下聲明：代碼:!DOCTYPE HTML PUBLIC //W3C//DTD HTML Transitional//EN 二、萬能 float 閉合(非常重要!) 可以用這個解決多個div對齊時的間距不對，關于 clear float 的原理可參見 [How To Clear Floats Without Structural Markup]將以下代碼加入Global CSS 中,給需要閉合的div加上 class=”clearfix” 即可,屢試不爽.代碼:style/* Clear Fix */.clearfix:after {content:.。display:block。height:0。clear:both。visibility:hidden。}.clearfix {display:inlineblock。}/* Hide from IE Mac \*/.clearfix {d