CSS對瀏覽器器的兼容性具有很高的價(jià)值

1、CSS寸瀏覽器器的兼容性具有很高的價(jià)值，通常情況下IE和Firefox存在很大的解析差異,這里介紹一下兼容要點(diǎn)。常見兼容問題：1. DOCTYPE影卩向CSS處理2.FF: div 設(shè)置 margin-left, margin-right為 auto 時(shí)已經(jīng)居中 , IE不行3.FF: body 設(shè) 置 text-align時(shí) ,div 需 要 設(shè) 置margin:auto( 主 要 是margin-left,margin-right)方可居中4.FF: 設(shè)置 padding 后 , div 會增加height 和 width,但 IE不會 , 故 需要用 !important 多設(shè)一個(gè) he

2、ight 和 width5. FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設(shè)置樣式6. div 的垂直居中問題 : vertical-align:middle;將行距增加到和整個(gè) DIV 一樣高line-height:200px; 然后插入文字，就垂直居中了缺點(diǎn)是要控制內(nèi)容不要換行7. cursor: pointer可以同時(shí)在 IE FF 中顯示游標(biāo)手指狀， hand 僅 IE 可以8. FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時(shí)設(shè)置 float: left 保證不換 行。參照 menubar, 給 a 和 me

3、nubar 設(shè)置高度是為了避免底邊顯示錯位 , 若不設(shè) height, 可以在 menubar 中插入一個(gè)空格。9. 在mozilla firefox 和IE中的BOX模型解釋不一致導(dǎo)致相差 2px解決方法： divmargin:30px!important;margin:28px;注意這兩個(gè) margin 的順序一定不能寫反， 據(jù)阿捷的說法 !important 這個(gè)屬性 IE 不能識別， 但別的瀏覽器可以識別。所以在 IE 下其實(shí)解釋成這樣：divmaring:30px;margin:28px 重復(fù)定義的話按照最后一個(gè)來執(zhí)行，所以不可以只寫 margin:XXpx!important;10

4、.IE5和IE6的BOX解釋不一致IE5 下divwidth:300px;margin:0 10px 0 10px;div的寬度會被解釋為300px-10px（右填充）-10px（左填充）最終div的寬度為280px,而在IE6和其他瀏覽器上寬度則是以 300px+10px（右填充）+10px（左填充）=320px來計(jì)算的。這時(shí)我們可以做如下修改divwidth:300px!important;width :340px;margin:0 10px 0 10px關(guān)于這個(gè)是什么我也不太明白,只知道 IE5 和 firefox 都支持但 IE6 不支持,如果有人理 解的話,請告訴我一聲,謝了！ ：）

5、11.ul 標(biāo)簽在 Mozilla 中默認(rèn)是有 padding 值的,而在 IE 中只有 margin 有值所以先定義 ulmargin:0;padding:0;就能解決大部分問題注意事項(xiàng)：1 、float的 div 一定要閉合例如： （ 其中 floatA 、floatB 的屬性已經(jīng)設(shè)置為 float:left;） 這里的 NOTfloatC 并不希望繼續(xù)平移，而是希望往下排。這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標(biāo)簽, 標(biāo)簽閉合。在之間加上這個(gè) div 一定要注意聲明位置，一定要放在最恰當(dāng)?shù)牡胤?，而且必須與兩個(gè)具有 性的 div 同級，之間不能存在嵌

6、套關(guān)系，否則會產(chǎn)生異常。并且將 clear 這種樣式定義為為如下即可：必須將 floatfloat 屬.clear clear:both; 此外，為了讓高度能自動適應(yīng)，要在 wrapper 里面加上 overflow:hidden;當(dāng)包含float的box的時(shí)候，高度自動適應(yīng)在IE下無效，這時(shí)候應(yīng)該觸發(fā)IE的layout私 有屬性（萬惡的IE啊?。┯脄oom:1 ;可以做到，這樣就達(dá)到了兼容。例如某一個(gè) wrapper 如下定義：.colwrapperoverflow:hidden;zoom:1;margin:5px auto;2、margin 加倍的問題。設(shè)置為 float 的 div 在

7、ie 下設(shè)置的 margin 會加倍。這是一個(gè) ie6 都存在的 bug。解決方案是在這個(gè) div 里面加上 display:inline;例如：相應(yīng)的 css 為#IamFloatfloat:left;margin:5px;display:inline; 3、關(guān)于容器的包涵關(guān)系很多時(shí)候，尤其是容器內(nèi)有平行布局，例如兩、三個(gè) float 的 div 時(shí)，寬度很容易出現(xiàn)問 題。在 IE 中，外層的寬度會被內(nèi)層更寬的 div 擠破。一定要用 Photoshop 或者 Firework 量取像素級的精度。4、關(guān)于高度的問題 如果是動態(tài)地添加內(nèi)容，高度最好不要定義。瀏覽器可以自動伸縮，然而如果是靜態(tài)的

8、內(nèi) 容，高度最好定好。(似乎有時(shí)候不會自動往下?lián)伍_，不知道具體怎么回事)5、最狠的手段 - !important;如果實(shí)在沒有辦法解決一些細(xì)節(jié)問題 , 可以用這個(gè)方法 .FF 對于” !important ”會自動優(yōu)先 解析,然而IE則會忽略.如下.tabd1background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important;background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; 值得注意的是，一定要將 xxxx !important 這句放置在另一句之上，上面已

9、經(jīng)提過2008 年9月16日新增屏蔽 IE 瀏覽器(也就是 IE 下不顯示)*:lang(zh) select font:12px !important; select:empty font:12px !important;這里select是選擇符，根據(jù)情況更換。第二句是MACt safari瀏覽器獨(dú)有的僅 IE7 與 IE5.0 可以識別*+html select 當(dāng)面臨需要只針對 IE7 與 IE5.0 做樣式的時(shí)候就可以采用這個(gè) HACK。僅 IE7 可以識別*+html select !important;當(dāng)面臨需要只針對IE7做樣式的時(shí)候就可以采用這個(gè) HACKIE6及IE6以下識別

10、* html select 這個(gè)地方要特別注意很多博客都寫成了是IE6的HACKt實(shí)IE5.x同樣可以識別這個(gè)HACK其它瀏覽器不識別。html body select 這句與上一句的作用相同。僅 IE6 不識別，屏蔽 IE6select display :none;這里主要是通過CSS注釋分開一個(gè)屬性與值，注釋在冒號前。僅 IE6 與 IE5 不識別，屏蔽 IE6 與 IE5select display :none;這里與上面一句不同的是在選擇符與花括號之間多了一個(gè)CSS注釋。不屏蔽IE5.5僅 IE5 不識別，屏蔽 IE5select 這一句是在上一句中去掉了屬性區(qū)的注釋。只有IE5不識別

11、，IE5.5可以識別。盒模型解決方法selct width:IE5.x 寬度; voice-family :” ”; voice-family:inherit; width:正確寬度 ;盒模型的清除方法不是通過 !important 來處理的。這點(diǎn)要明確。清除浮動select:aftercontent: ”. ”;display:block;height:0; clear:both;visibility:hidden;在 Firefox 中，當(dāng)子級都為浮動時(shí)，那么父級的高度就無法完全的包住整個(gè)子級，那么這 時(shí)用這個(gè)清除浮動的HACK來對父級做一次定義，那么就可以解決這個(gè)問題。截字省略號sele

12、ct -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 這個(gè)是在越出長度后會自行的截掉多出部分的文字，并以省略號結(jié)尾，很好的一個(gè)技術(shù)。只是目前 Firefox 并不支持 只有 Opera 識別media all and (min- width: Opx) select 針對 Opera 瀏覽器做單獨(dú)的設(shè)定。以上都是寫CS軒的一些HACK這些都是用來解決局部的兼容性問題，如果希望把兼容性 的內(nèi)容也分離出來，不妨試一下下面的幾種過濾器。這些過濾器有的是寫在CSS中通過過濾器

13、導(dǎo)入特別的樣式，也有的是寫在HTM中的通過條件來鏈接或是導(dǎo)入需要的補(bǔ)丁樣式。IE5.x 的過濾器，只有 IE5.x 可見media tty icontent: ” ”; import ie5win.css ;IE5/MAC的過濾器，一般用不著IE 的 if 條件 HackOnly IE 所有的 IE 可識別CSS HAC(K ie6-ie7-fox兼容)與 FF：DIV+CSS 2009-09-27 09:13 閱讀39 評論0 字號： 大大 中中 小小 區(qū)別IE6background:orange;*background:blue;區(qū)別 IE6 與 IE7 ： background:gree

14、n !important;background:blue;區(qū)別 IE7 與 FF：background:orange; *background:green;區(qū)別 FF，IE7 ，IE6 ：background:orange;*background:green !important;*background:blue;注：IE都能識別*;標(biāo)準(zhǔn)瀏覽器（如FF）不能識別* ;IE6 能識別 * ，但不能識別 !important,IE7 能識別 * ，也能識別 !important;FF不能識別*，但能識別！important; IE6 IE7 FF* V V x!importantx V V另外再補(bǔ)

15、充一個(gè)，下劃線” _“,IE6 支持下劃線， IE7 和 firefox 均不支持下劃線。 （推薦）于是大家還可以這樣來區(qū)分 IE6， IE7， FF: background:orange;*background:green;_background:blue;注：不管是什么方法，書寫的順序都是 firefox 的寫在前面， IE7 的寫在中間， IE6 的寫在最后面。一、CSS HACK以下兩種方法幾乎能解決現(xiàn)今所有 HACK.1, !important隨著IE7對!important 的支持，！important 方法現(xiàn)在只針對IE6的HACK.注意寫法.記得該聲明位置需要提前 .)styl

16、egt;#wrapperwidth: 100px!important; /* IE7+FF */width: 80px; /* IE6 */stylegt;2, IE6/IE77 對 FireFox*+html與*html是IE特有的標(biāo)簽,firefox暫不支持.而*+html又為IE7特有標(biāo)簽. #wrapper#wrapper width: 120px; /* FireFox */*html #wrapper width: 80px; /* ie6 fixed */*+html #wrapper width: 60px; /* ie7 fixed,注意順序 */*+html對IE7的HAC

17、K必須保證HTML!部有如下聲明：/* Clear Fix */.clearfix:aftercontent:.;display:block;height:0;clear:both;visibility:hidden;.clearfixdisplay:inline-block;/* Hide from IE Mac */.clearfix display:block;/* End hide from IE Mac */* end of clearfix */關(guān)于閉合浮動元素( clearing float )的方法現(xiàn)在已經(jīng)很多了，個(gè)人認(rèn)為簡單實(shí)用的方法 就是使用 :after 偽類動態(tài)的嵌入一

18、個(gè)用于清除浮動的元素，可惜代碼量太大了，看上去不 夠簡潔overflow 上，因?yàn)檫@ 一方面的原理是，外圍元素之所以不能很好的延伸，問題出在了overflow 不可見（見 W30的解釋）?，F(xiàn)在只要將給外圍元素添加一個(gè)“ overflow:auto ”,就可以解決問題，結(jié)果是除了IE ，真的可以解決。下來就要解決ID 的問題了，再加上“_height:1% ”,這 個(gè)問題就完全解決了。下面的例子作為比較1、沒有閉合浮動元素； 2、非 IE 下閉合浮動元素； 3、完全閉合元素。相關(guān)代碼如下：XHTML弋碼：Example Source Code wwFloat leftFloat rightCSS

19、樣式:Example Source Code ww #wrap border:6px #ccc solid; overflow:auto; _height:1%;.column_left float:left; width:20%; padding:10px;.column_right float:right; width:75%; padding:10px; border-left:6px #eee solid;三、其他兼容技巧 （再次啰嗦 ）1, FF 下給 div 設(shè)置 padding 后會導(dǎo)致 width 和 height 增加 , 但 IE 不會 .（ 可用!important 解決

20、）2, 居中問題 .1）. 垂直居中 . 將 line-height 設(shè)置為 當(dāng)前 div 相同的高度 , 再通過 vertical-align: middle.（ 注意內(nèi)容不要換行 .）2）. 水平居中 . margin: 0 auto;（ 當(dāng)然不是萬能 ）3, 若需給 a 標(biāo)簽內(nèi)內(nèi)容加上 樣式, 需要設(shè)置 display: block;（ 常見于導(dǎo)航標(biāo)簽 ）4, FF 和 IE 對 BOX 理解的差異導(dǎo)致相差 2px 的還有設(shè)為 float 的 div 在 ie 下 margin 加倍等問題 .5, ul 標(biāo)簽在 FF 下面默認(rèn)有 list-style 和 padding . 最好事先聲明

21、 , 以避免不必要的 麻煩. （ 常見于導(dǎo)航標(biāo)簽和內(nèi)容列表 ）6, 作為外部 wrapper 的 div 不要定死高度 , 最好還加上 overflow: hidden. 以達(dá)到高度自適應(yīng) .7, 關(guān)于手形光標(biāo) . cursor: pointer. 而 hand 只適用于 IE.1 針對 firefox ie6 ie7 的 css 樣式現(xiàn)在大部分都是用！important 來hack，對于ie6和firefox 測試可以正常顯示，但是ie7對!important可以正確解釋，會導(dǎo)致頁面沒按要求顯示！找到一個(gè)針對 IE7 不錯的 hack 方式就是使用“ *+html ”，現(xiàn)在用 IE7 瀏覽一

22、下，應(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 下字體顏色顯示 為#999。2 css 布局中的居中問題主要的樣式定義如下：body TEXT-ALIGN: center;#center MARGIN-RIGHT: auto; MARGIN-LEFT: auto; 說明： 首先在父級元素定義 TEXT-ALIGN: cen

23、ter; 這個(gè)的意思就是在父級元素內(nèi)的內(nèi)容居中；對 于 IE 這樣設(shè)定就已經(jīng)可以了。但在 mozilla 中不能居中。 解決辦法就是在子元素定義時(shí)候設(shè)定時(shí)再加上“MARGIN-RIGHT:auto;MARGIN-LEFT: auto; ”需要說明的是，如果你想用這個(gè)方法使整個(gè)頁面要居中，建議不要套在一個(gè) DIV 里，你可 以依次拆出多個(gè) div ，只要在每個(gè)拆出的 div 里定義 MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。3 盒模型不同解釋 .#box width:600px; /for ie6.0- width:500px; /for ff+ie6

24、.0#box width:600px!important /for ff width:600px; /for ff+ie6.0 width /*/:500px;/for ie6.0-4 浮動 ie 產(chǎn)生的雙倍距離#box float:left; width:100px; margin:0 0 0 100px; / 這種情況之下 IE 會產(chǎn)生 200px 的距離 display:inline; / 使浮動忽略 這里細(xì)說一下 block,inline 兩個(gè)元素 ,Block 元素的特點(diǎn)是 : 總是在新行上開始 , 高度, 寬度 , 行高,邊距都可以控制（塊元素）;lnline元素的特點(diǎn)是：和其他元

25、素在同一行上， 不可控制（內(nèi)嵌元素）;實(shí)現(xiàn)同一行#box display：block; / 可以為內(nèi)嵌元素模擬為塊元素 display：inline; / 排列的的效果 diplay：table;5 IE 與寬度和高度的問題IE 不認(rèn)得 min- 這個(gè)定義，但實(shí)際上它把正常的 width 和 height 當(dāng)作有 min 的情況來使。 這樣問題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個(gè)值就不會變，如果只用 min-width 和 min-height 的話， IE 下面根 本等于沒有設(shè)置寬度和高度。比如要設(shè)置背景圖片，這個(gè)寬度是比較重要的。要解決這個(gè)問題，可以這樣：#box width:

26、 80px; height: 35px;htmlbody #box width: auto; height: auto; min-width: 80px; min-height: 35px;6 頁面的最小寬度min-width是個(gè)非常方便的CSS命令，它可以指定元素最小也不能小于某個(gè)寬度，這樣就 能保證排版一直正確。但 IE 不認(rèn)得這個(gè)，而它實(shí)際上把 width 當(dāng)做最小寬度來使。為了讓這一命令在 IE 上也能用，可以把一個(gè) 放到 標(biāo)簽下，然后為 div 指定一個(gè)類：然后CSS這樣設(shè)計(jì)：第一個(gè) min-width 是正常的；但第 2 行的 width 使用了 Javascript ，這只有 I

27、E 才認(rèn)得， 這也會讓你的HTM文檔不太正規(guī)。它實(shí)際上通過 Javascript的判斷來實(shí)現(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; clear: both; visib

28、ility: hidden;8 DIV 浮動 IE 文本產(chǎn)生 3 象素的 bug左邊對象浮動，右邊采用外補(bǔ)丁的左邊距來定位，右邊對象內(nèi)的文本會離左邊有 3px 的間 距.#box float:left; width:800px;#left float:left; width:50%;#right width:50%;*html #left margin-right:-3px; / 這句是關(guān)鍵 HTML弋碼 v/div9 屬性選擇器 （ 這個(gè)不能算是兼容 , 是隱藏 css 的一個(gè) bug）piddivid這個(gè)對于 IE6.0 和 IE6.0 以下的版本都隱藏 ,FF 和 OPera 作用 屬性

29、選擇器和子選擇器還是有區(qū)別的 , 子選擇器的范圍從形式來說縮小了 ,屬性選擇器的范 圍比較大 , 如 pid 中, 所有 p 標(biāo)簽中有 id 的都是同樣式的 .10 IE 捉迷藏的問題 當(dāng) div 應(yīng)用復(fù)雜的時(shí)候每個(gè)欄中又有一些鏈接， DIV 等這個(gè)時(shí)候容易發(fā)生捉迷藏的問題 有些內(nèi)容顯示不出來，當(dāng)鼠標(biāo)選擇這個(gè)區(qū)域是發(fā)現(xiàn)內(nèi)容確實(shí)在頁面 解決辦法：對 #layout 使用 line-height 屬性 或者給 #layout 使用固定高和寬。頁面結(jié)構(gòu) 盡量簡單。11 高度不適應(yīng) 高度不適應(yīng)是當(dāng)內(nèi)層對象的高度發(fā)生變化時(shí)外層高度不能自動進(jìn)行調(diào)節(jié)，特別是當(dāng)內(nèi)層對 象使用margin 或 paddign

30、時(shí)。例：p 對象中的內(nèi)容CSS： #box background-color:#eee; #box p margin-top: 20px;margin-bottom: 20px; text-align:center; 解決方法：在P對象上下各加2個(gè)空的div對象CSS弋碼：.1height:0px;overflow:hidden; 或者為 DIV 加上 border 屬性。12 float 的 div 閉合; 清除浮動; 自適應(yīng)高度 ; 例如： 這 里的 NOTfloatC 并不希望繼續(xù)平移，而是希望往下排。 （ 其中 floatA 、floatB 的屬性已經(jīng) 設(shè)置為 float:left;）

31、這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標(biāo)簽，必須將float 標(biāo)簽 閉合。在 v#div class= ” NOTfloatC ” 之間加上 這個(gè) div 一定要注意位置，而且必須與兩個(gè)具有 float 屬性的 div 同級， 之間不能存在嵌套關(guān)系，否則會 產(chǎn)生異常。 并且將 clear 這種樣式定義為為如下即 可： .clear clear:both; 作為外部 wrapper 的 div 不要定死高度 , 為了讓高度能自動適應(yīng)， 要在 wrapper 里面加 上 overflow:hidden; 當(dāng)包含 float 的 box 的時(shí)候， 高度自動適應(yīng)

32、在 IE 下無效， 這時(shí)候應(yīng) 該觸發(fā)IE的layout私有屬性（萬惡的IE啊?。┯脄oom:1;可以做到，這樣就達(dá)到了兼容。例如某一個(gè) wrapper 如下定義：.colwrapper overflow:hidden; zoom:1; margin:5px auto; 對于排版 , 我們用得最多的 css 描述可能就是 float:left. 有的時(shí)候我們需要在 n 欄的float div 后面做一個(gè)統(tǒng)一的背景 , 譬如:比 如我們要將 page 的背景設(shè)置成藍(lán)色 ,以達(dá)到所有三欄的背景顏色是藍(lán)色的目的 , 但是我 們會發(fā)現(xiàn)隨著 left center right 的向下拉長 ,而 page

33、居然保存高度不變 ,問題來了 ,原因 在于page不是float屬性,而我們的page由于要居中,不能設(shè)置成float,所以我們應(yīng)該這 樣解決再嵌入一個(gè)float left 而寬度是100%勺DIV解決之 萬能 float 閉合（非常重要!）關(guān) 于 clear float 的原理可參見 How To Clear Floats Without Structural Markup, 將以下 代碼加入 Global CSS 中, 給需要閉合的 div 加上 class=clearfix 即可, 屢試不 爽./* Clear Fix */.clearfix:after content:.;displa

34、y:block; height:0; clear:both;visibility:hidden; .clearfix display:inline-block; /* Hide from IE Mac */ .clearfix display:block; /* End hide from IE Mac */* end of clearfix */將對象作為塊元素級的表格顯示 或者這樣設(shè)置： .hackbox display:table; /13 如何對齊文本與文本輸入框 加上 vertical-align:middle; 14 IE6 下為什么圖片下有空隙產(chǎn)生解決這個(gè)BUG的方法也有很多,可

35、以是改變html的排版,或者設(shè)置img為display:block或者設(shè)置 vertical-align 屬性為 vertical-align:top | bottom |middle |text-bottom 都可以解決 .15怎么樣才能讓層顯示在FLASH之上解決的辦法是給FLASHY置透明16 怎樣使一個(gè)層垂直居中于瀏覽器中這里我們使用百分比絕對定位 , 與外補(bǔ)丁負(fù)值的方法 , 負(fù)值的大小為其自身寬度高度除以二第一篇 DIV CSS 設(shè)計(jì)時(shí) IE6、IE7 、FF 與兼容性有關(guān)的特性在網(wǎng)站設(shè)計(jì)的時(shí)候，應(yīng)該注意 css 樣式兼容不同瀏覽器問題， 特別是對完全使用 DIV CSS設(shè)計(jì)的網(wǎng)站，

36、就應(yīng)該更注意IE6 IE7 FF對CSS羊式的兼容，不然，你的網(wǎng)頁可能出現(xiàn)意料之外的效果！例子：? 所有瀏覽器 通用 height: 100px;? IE6 專用 _height: 100px;? IE6 專用 *height: 100px;? IE7 專用 *+height: 100px;IE7、FF 共用 height: 100px !important;、CSS 兼容以下兩種方法幾乎能解決現(xiàn)今所有兼容 .1, !important （ 不是很推薦，用下面的一種感覺最安全 ）隨著IE7對!important 的支持,!important方法現(xiàn)在只針對IE6的兼容.（注意寫法.記得該聲明位置

37、需要提前 ）#wrapper width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */2, IE6/IE77 對 FireFox *+html與*html是IE特有的標(biāo)簽,firefox 暫不支持.而*+html又為IE7特有標(biāo) 簽.#wrapper width: 120px; /* FireFox */*html #wrapper width: 80px; /* ie6 fixed */ *+html #wrapper width: 60px; /*ie7 fixed, 注意順序 */ 注意：*+html對IE7的兼容 必須保證HT

38、M頂部有如下聲明：二、萬能 float 閉合 （非常重要 ）可以用這個(gè)解決多個(gè) div 對齊時(shí)的間距不對，將以下代碼加入 Global CSS 中, 給需要 閉合的 div 加上 class= ”clearfix ” 即可 , 屢試不爽 ./* Clear Fix */.clearfix:after content:.;display:block;height:0;clear:both;visibility:hidden;.clearfix display:inline-block;/* Hide from IE Mac */.clearfix display:block;/* End hid

39、e from IE Mac */* end of clearfix */三、其他兼容技巧 （相當(dāng)有用 ）1, FF 下給 div 設(shè)置 padding 后會導(dǎo)致 width 和 height 增加 , 但 IE 不會.（ 可用!important 解決）2, 居中問題 .1）. 垂直居中 . 將 line-height 設(shè)置為 當(dāng)前 div 相同的高度 , 再通過 vetical-align: middle.（注意內(nèi)容不要換行 .）2）. 水平居中 . margin: 0 auto;（當(dāng)然不是萬能 ）3, 若需給 a 標(biāo)簽內(nèi)內(nèi)容加上 樣式 , 需要設(shè)置 display: block;（常見于導(dǎo)

40、航標(biāo)簽 ）4, FF 和 IE 對 BOX 理解的差異導(dǎo)致相差 2px 的還有設(shè)為 float 的 div 在 ie 下 margin 加倍等問題 .5, ul 標(biāo)簽在 FF 下面默認(rèn)有 list-style 和 padding . 最好事先聲明 , 以避免不必 要的麻煩 . （ 常見于導(dǎo)航標(biāo)簽和內(nèi)容列表 ）6, 作為外部 wrapper 的 div 不要定死高度 , 最好還加上 overflow: hidden. 以達(dá) 到高度自適應(yīng) .而 hand 只適用于 IE.7, 關(guān)于手形光標(biāo) . cursor: pointer.第二篇 針對 firefox ie6 ie7 的 css 樣式什么是瀏覽

41、器兼容：當(dāng)我們使用不同的瀏覽器（ Firefox IE7 IE6 ）訪問同一個(gè)網(wǎng)站， 或者頁面的時(shí)候，會出現(xiàn)一些不兼容的問題，有的顯示出來正常，有的顯示出來不正常， 我們在編寫CSS勺時(shí)候會很惱火，剛修復(fù)了這個(gè)瀏覽器的問題，結(jié)果另外一個(gè)瀏覽器卻出 了新問題。而兼容就是一種辦法，能讓你在一個(gè)CSS里面獨(dú)立的寫支持不同瀏覽器的樣式。 這下就和諧了。呵呵！微軟發(fā)布的 IE7 瀏覽器的兼容性確實(shí)給一些網(wǎng)頁制作人員添加了一個(gè)沉重的負(fù)擔(dān)，雖然IE7已經(jīng)走向標(biāo)準(zhǔn)化，但還是有許多和 FF不同的地方，所以需要用到IE7的兼容，有許 多朋友問過 IE7 的兼容是什么，其實(shí)我也不知道。暫時(shí)還沒找到 IE7 專用的兼

42、容。除了前 面那片文章，針對 firefox ie6 ie7 的 css 樣式中的兼容方式也是很好用的。有一點(diǎn)邏輯思想的人都會知道可以用IE和FF的兼容結(jié)合起來使用，下面介紹三個(gè)兼 容，例如：（適合新手，呵呵，高手就在這里路過吧。）1. 第一個(gè)兼容， IE FF 所有瀏覽器 公用（其實(shí)也不算是兼容）2. height:100px;3. 第二個(gè)兼容 IE6 專用4. _height:100px;5. 第三個(gè)兼容 IE6 IE7 公用6. *height:100px;介紹完了這三個(gè)兼容了， 下面我們再來看看如何在一個(gè)樣式里分別給一個(gè)屬性定義 IE6IE7 FF 專用的兼容，看下面的代碼，順序不能錯

43、哦：1. height:100px;2. *height:120px;3. _height:150px;下面我簡單解釋一下各瀏覽器怎樣理解這三個(gè)屬性：在FF下，第2、3個(gè)屬性FF不認(rèn)識，所以它讀的是height:100px;在 IE7 下，第三個(gè)屬性 IE7 不認(rèn)識，所以它讀第 1、 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)

44、在大部分都是用 !important 來兼容，對于 ie6 和 firefox 測試可以正常顯示，但是 ie7 對 !important 可以正確解釋，會導(dǎo)致頁面沒按要求顯示！找到一個(gè)針對 IE7 不錯的兼 容方式就是使用“ *+html”，現(xiàn)在用IE7瀏覽一下，應(yīng)該沒有問題了現(xiàn)在寫一個(gè)CSS可以這樣：1. #1 color: #333; /* Moz */2. * html #1 color: #666; /* IE6 */3. *+html #1 color: #999; /* IE*/那么在firefox 下字體顏色顯示為#333IE6下字體顏色顯示為#666, IE7下字體顏色顯示為

45、#999。2 css 布局中的居中問題主要的樣式定義如下：1. body TEXT-ALIGN: center;2. #center MARGIN-RIGHT: auto; MARGIN-LEFT: auto; 說明：首先在父級元素定義 TEXT-ALIGN: center; 這個(gè)的意思就是在父級元素內(nèi)的內(nèi)容居中； 對于 IE 這樣設(shè)定就已經(jīng)可以了。但在 mozilla 中不能居中。解決辦法就是在子元素定義時(shí)候設(shè)定時(shí)再加上： “MARGI-NRIGHT: auto;MARGIN- LEFT: auto; ”需要說明的是，如果你想用這個(gè)方法使整個(gè)頁面要居中，建議不要套在一個(gè)DIV里，你可以依次拆

46、出多個(gè) div ，只要在每個(gè)拆出的 div 里定義 MARGIN-RIGHTa: uto;MARGIN-LEFT: auto; 就可以了。3 盒模型不同解釋#boxwidth:600px;/for ie6.0- width:500px;/for ff+ie6.0#box width:600px!important /for ff width:600px; /for ff+ie6.0 width /*/:500px;/for ie6.0- 4 浮動 ie 產(chǎn)生的雙倍距離這種情況之下 IE 會產(chǎn)1. #box float:left; width:100px; margin:0 0 0 100px;

47、 / 生 200px 的距離2. display:inline; / 使浮動忽略3. 這里細(xì)說一下 block,inline 兩個(gè)元素 ,Block 元素的特點(diǎn)是 : 總是在新行上開始 , 高度 ,寬度，行高，邊距都可以控制（塊元素）;lnline元素的特點(diǎn)是：和其他元素在同一行上，不可控制 （ 內(nèi)嵌元素 ）;1. #box display：block; / 可以為內(nèi)嵌元素模擬為塊元素2. display：inline; / 實(shí)現(xiàn)同一行排列的的效果3. iplay：table;5 lE 與寬度和高度的問題IE不認(rèn)得min-這個(gè)定義，但實(shí)際上它把正常的width和height當(dāng)作有min的情況來

48、使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個(gè)值就不會變，如果只 用 min-width 和 min-height 的話， IE 下面根本等于沒有設(shè)置寬度和高度。比如要設(shè)置背 景圖片，這個(gè)寬度是比較重要的。要解決這個(gè)問題，可以這樣：1. #box width: 80px; height: 35px;2. htmlbody #box width: auto; height: auto; min-width: 80px; min-height:35px;6 頁面的最小寬度min-width是個(gè)非常方便的CSS命令，它可以指定元素最小也不能小于某個(gè)寬度，這 樣就能保證排版一直正確。但

49、IE 不認(rèn)得這個(gè)，而它實(shí)際上把 width 當(dāng)做最小寬度來使。 為了讓這一命令在 IE 上也能用， 可以把一個(gè) 放到 標(biāo)簽下， 然后為 div 指定 一個(gè)類：然后CSS這樣設(shè)計(jì)：1. #container2. min-width: 600px;3. 第一個(gè) min-width 是正常的；但第 2 行的 width 使用了 Javascript ，這只有 IE 才認(rèn) 得，這也會讓你的HTML文檔不太正規(guī)。它實(shí)際上通過Javascript的判斷來實(shí)現(xiàn)最小寬度。7 清除浮動1. .兼容 box2. display:table;3. / 將對象作為塊元素級的表格顯示4. 5. 或者6. .兼容 box

50、7. clear:both;8. 或者加入 :after （偽對象） , 設(shè)置在對象后發(fā)生的內(nèi)容，通常和 content 配合使用， IE 不支持此偽對象，非 Ie 瀏覽器支持，所以并不影響到 IE/WIN 瀏覽器。這種的最麻煩的。1. #box:after2. content: “. ”;3. display: block;4. height: 0;5. clear: both;6. visibility: hidden;7. 8 DIV 浮動 IE 文本產(chǎn)生 3 象素的 bug3px左邊對象浮動，右邊采用外補(bǔ)丁的左邊距來定位，右邊對象內(nèi)的文本會離左邊有 的間距.1. #box2. float:left;3. width:800px;4. #left5. float:left;6. width:50%;7. #right8. width:50%;9. 10. *html #left11. margin-right:-3px;12. / 這句是關(guān)鍵13. HTML弋碼：1. 2. 3. 4. 9 屬性選擇器 （ 這個(gè)不能算是兼容 , 是隱藏 css 的一個(gè) bug）1. piddivid2. piddivid這個(gè)對于IE6.0和IE6.0以下的版本都隱藏，F(xiàn)F和OPera作用。屬性選擇器和子選擇器還是有區(qū)別的 , 子選擇器的范圍從形式來說縮小了 , 屬性選擇器 的范