【正文】 IE + 包換 都可以識(shí)別 僅 IE6 可識(shí)別 Only IE 7/ IE6 以及 IE6 以下的 都可識(shí)別 Only IE 7/ 僅 IE7 可識(shí)別 Css 當(dāng)中有許多的東西不不按照某些規(guī)律來的話，會(huì)讓你很心煩，雖然你可以通過很 多的hack，很多的 !important 來控制它，但是你會(huì)發(fā)現(xiàn)長(zhǎng)此以往你會(huì)很不甘心，看看許多優(yōu)秀的網(wǎng)站，他們的 CSS 讓 IE6,Ie7,Firefox,甚至 Safari,Opera 運(yùn)行起來完美無缺是不是很羨慕？而他們看似復(fù)雜的模版下面使用的 Hack 少得可憐。} }/* */ IE5/MAC 的過濾器，一般用不著 /**//*/ import 。39。 的過濾器，只有 可見 media tty { i{content:。 以上都是寫 CSS 中的一些 HACK，建議遵循正確的標(biāo)簽嵌套 (div ul li 嵌套結(jié)構(gòu)關(guān)系 )，這樣可以減少你使用 Hack 的頻率，不要進(jìn)入理解誤區(qū)，并不是一個(gè)頁面就需要很多的 hack 來保持多瀏覽器兼容 )，很多情況下也許一個(gè) Hack 都不用也可以讓瀏覽器工作得非常好，這些都是用來解決局部的兼容性問題，如 果希望把兼容性的內(nèi)容也分離出來，不妨試一下下面的幾種過濾器。只是目前 Firefox 并不支持。 overflow:hidden。 textoverflow:ellipsis。} 在 Firefox 中，當(dāng)子級(jí)都為浮動(dòng)時(shí)，那么父級(jí)的高度就無法完全的包住整個(gè)子級(jí)，那么這時(shí)用這個(gè)清除浮動(dòng)的 HACK 來對(duì)父級(jí)做一次定義，那么就可以解決這個(gè)問題 。 clear:both。 display:block。這點(diǎn)要明確。 width:正確寬度 。 voicefamily :}。} 這一句是在上一句中去掉了屬性區(qū)的注釋。} 12 這里與上面一句不同的是在選擇符與花括號(hào)之間多了一個(gè) CSS 注釋。} 這里主要是通過 CSS 注釋分開一個(gè)屬性與值，流釋在冒號(hào)前。 html/**/ body select {……} 這句與上一句的作用相同。 IE6 及 IE6 以下識(shí)別 * html {…} 這個(gè)地方要特別注意很多地主都寫了是 IE6 的 HACK 其實(shí) 同樣可以識(shí)別這個(gè) HACK。第二句是 MAC 上 safari 瀏覽器獨(dú)有的。} /*FF,OP 可見 */ select:empty {font:12px !important。}或者為 DIV 加上 border 屬性。 } 解決方法：在 P 對(duì)象上下各加 2 個(gè)空的 div 對(duì)象 CSS 代碼： .1{height:0px。marginbottom: 20px。例： div id=”box” pp 對(duì)象中的內(nèi)容 /p /div CSS： box {backgroundcolor:eee。頁面結(jié)構(gòu)盡量簡(jiǎn)單。 有些內(nèi)容顯示不出來，當(dāng)鼠標(biāo)選擇這個(gè)區(qū)域是發(fā)現(xiàn)內(nèi)容確實(shí)在頁面。 } *html left{ marginright:3px。 width:50%。 width:800px。 visibility: hidden。 height: 0。這種的最麻煩的 ?? box:after{ content: “.”。 //將對(duì)象作為塊元素級(jí)的表格顯示 } 或者 .hackbox{ clear:both。它實(shí)際上通過 Javascript 的判斷來實(shí)現(xiàn)最小寬度。 width:e?xpression( 600? “600px”: “auto” )。但 IE 不認(rèn)得這個(gè)，而它實(shí)際上把 width 當(dāng)做最小寬度來使。 minheight: 35px。 height: auto。 height: 35px。比如要設(shè)置背景圖片，這個(gè)寬度是比較重要的。 5 IE 與寬度和高度的問題 9 IE 不認(rèn)得 min這個(gè)定義，但實(shí)際上它把正常的 width 和 height 當(dāng)作有 min 的情況來使。 //可以為內(nèi)嵌元素模擬為塊元素 display:inline。Inline 元素的特點(diǎn)是 :和其他元素在同一行上 ,?不可控制 (內(nèi)嵌元素 )。 //這種情況之下 IE 會(huì)產(chǎn)生 200px 的距離 display:inline。 width:100px。 //for ff+ width /**/:500px。 //for w\idth:500px。 就可以了。 ” 需要說明的是，如果你想用這個(gè)方法使整個(gè)頁面要居中，建議不要套在一個(gè) DIV 里，你可以依次拆出多個(gè) div，只 要在每個(gè)拆出的 div 里定義 MARGINRIGHT: auto。解決辦法就是在子元素定義時(shí)候設(shè)定時(shí)再加上“ MARGINRIGHT: auto。這個(gè)的意思就是在父級(jí)元素內(nèi)的內(nèi)容居中；對(duì)于 IE 這樣設(shè)定就已經(jīng)可以了。 MARGINLEFT: auto。 2 css 布局中的居中問題 主要的樣式定義如下： 8 body {TEXTALIGN: center。 } /* IE6 */ *+html 1 { color: 999。 1 針對(duì) firefox ie6 ie7 的 css 樣式 現(xiàn)在大部分都是用 !important 來 hack，對(duì)于 ie6 和 firefox 測(cè)試可以正常顯示，但是 ie7對(duì) !important 可以正確解釋，會(huì)導(dǎo)致頁面沒按要求顯示！找到一個(gè)針對(duì) IE7 不錯(cuò)的 hack 方式就 是使用“ *+html”，現(xiàn)在用 IE7 瀏覽一下，應(yīng)該沒有問題了現(xiàn)在寫一個(gè) CSS 可以這樣： 1 { color: 333。 在 IE7 下，第三個(gè)屬性 IE7 不認(rèn)識(shí)，所以 它讀第 2 個(gè)屬性，又因?yàn)榈诙€(gè)屬性覆蓋了第一個(gè)屬性，所以 IE7 最終讀出的是第 2 個(gè)屬性 *height:120px。 _height:150px。 介紹完了這三個(gè) HACK 了，下面我們?cè)賮砜纯慈绾卧谝粋€(gè)樣式里分別給一個(gè)屬性定義 IE6 IE7 FF 專用的 HACK，看下面的代碼，順序不能錯(cuò)哦： 程序代碼 height:100px。 第二個(gè) HACK IE6 專用 _height:100px。 有一點(diǎn)邏輯思想的人都會(huì)知道可以用 IE 和 FF 的 HACK 結(jié)合起來使用，下面介紹三個(gè)HACK，例如：（適合新手，呵呵，高手就在這里路過吧。暫時(shí)還沒找到 IE7 專用的 HACK。這下就和諧了。 } 什么是瀏覽器 HACK：當(dāng)我們使用不同的瀏覽器（ Firefox IE7 IE6）訪問同一個(gè)網(wǎng)站，或者頁面的時(shí)候，會(huì)出現(xiàn)一些不兼容的問題，有的顯示出來正常，有的顯示出來不正常，我們?cè)诰帉?CSS 的時(shí)候會(huì)很惱火，剛修復(fù)了這個(gè)瀏覽器的問題，結(jié)果另外一個(gè)瀏覽器卻出了新問題。 } /* IE6 */ *html .submitbutton { margintop: 21px。 margintop: 24px。 width: 40px。(常見于導(dǎo)航標(biāo)簽 ) 4, FF 和 IE 對(duì) BOX 理解的差異導(dǎo)致相差 2px 的還有設(shè)為 float 的 div 在 ie 下 margin 加倍等問題 . 5, ul 標(biāo)簽在 FF 下面默認(rèn)有 liststyle 和 padding . 最好事先聲明 , 以避免不必要的麻煩 . (常見于導(dǎo)航標(biāo)簽和內(nèi)容列表 ) 6, 作為外部 wrapper 的 div 不要定死高度 , 最好還加上 overflow: 應(yīng) . 6 7, 關(guān)于手形光標(biāo) . cursor: pointer. 而 hand 只適用于 : 兼容代碼 :hack 最推薦的模式。} /* End hide from IE Mac */ /* end of clearfix */ /style 三、其他兼容技巧 (相當(dāng)有用 ) 1, FF 下給 div 設(shè)置 padding 后會(huì)導(dǎo)致 width 和 height 增加 , 但 IE 不會(huì) .(可用 !important解決 ) 2, 居中問題 . 1).垂直居中 .將 lineheight 設(shè)置為 當(dāng)前 div 相同的高度 , 再通過 verticalalign: middle.( 注意內(nèi)容不要換行 .) 2).水平居中 . margin: 0 auto。 } .clearfix { display:inlineblock。 clear:both。 display:block。} /* ie6 fixed */ *+html wrapper { width: 60px。 /* IE6 */ } /style 2, IE6/IE77 對(duì) FireFox from 針對(duì) firefox ie6 ie7 的 css 樣式 *+html 與 *html 是 IE 特有的標(biāo)簽 , firefox 暫不支持 .而 *+html 又為 IE7 特有標(biāo)簽 . 代碼 : style wrapper { width: 120px。 一、 CSS HACK 以下兩種方法幾乎能解決現(xiàn)今所 有 HACK. 1, !important (不是很推薦，用下面的一種感覺最安全 ) 隨著 IE7 對(duì) !important 的支持 , !important 方法現(xiàn)在只針對(duì) IE6 的 HACK.(注意寫法 .記得該聲明位置需要提前 .) 代碼 : style wrapper { width: 100px!important。 IE7 專用 *+height: 100px。 IE6 專用 _height: 100px。將中間欄設(shè)置 margin 屬性中 left 和 right 設(shè)置 104px（該參數(shù)根據(jù)左右欄的寬度設(shè)置，只要略大于左右欄寬 度即可），用于實(shí)現(xiàn)兩邊自適應(yīng)寬度。 將左欄的 position 設(shè)置為 absolute，并將 top 和 left 設(shè)置為 0px。如果要求左欄和右欄固定寬度，中間欄需要在左欄和右欄中間，并根據(jù)左右欄的寬度自動(dòng)調(diào)整間距。 浮動(dòng)式布局使得頁面的大部分內(nèi)容都可以由瀏覽器來自動(dòng)調(diào)試之間的關(guān)系，使我們能夠?qū)Ｗ⒂跇邮皆O(shè)計(jì)而非其相互之間的浮動(dòng)關(guān)系，我們只需要簡(jiǎn) 單地設(shè)置浮動(dòng)方向便可以完成對(duì)象的布局分布。 要實(shí)現(xiàn)兩列的布局的話，定義左欄和右欄中的 float 屬性都為“ left”。使用 left 時(shí)，表示右側(cè)對(duì)象將流到當(dāng)前對(duì)象左側(cè)。 浮動(dòng)是一種非常先進(jìn)的布局方式，它能夠改變頁面中對(duì)象的前后流動(dòng)順序，這樣可以使內(nèi)容的排版變得簡(jiǎn)單而且具有良好的伸縮性。也是理解 CSS 布局的關(guān)鍵問題所在。該屬性用來控制對(duì)象浮動(dòng)布局方式。我們知道 DIV 用于對(duì)某一個(gè)區(qū)域的標(biāo)識(shí)，兩列的布局需要采用兩個(gè)DIV。如果將左右邊距設(shè)置為 auto，瀏覽器就會(huì)將 DIV 左右邊距設(shè)置為相同，從而實(shí)現(xiàn)居中效果。 DIV 本身也支持該屬性，但在 CSS 布局中為了實(shí)現(xiàn)表格與內(nèi)容分離，因此在設(shè)置居中屬性時(shí)，通過 margin 屬性來控制對(duì)象的上下左右四個(gè)方向的外邊距。 3．一列固定寬度居中。 Width（寬度）屬 性也不例外。一列自適應(yīng)布局只需要將寬度由固定值改為百分比的形式即可完成。良好的自適應(yīng)布局網(wǎng)站對(duì)不同分辨率的顯示器都能提供最好的顯示效果。自適應(yīng)布局是網(wǎng)頁設(shè)計(jì)中常見的布局形式。 DIV 在默認(rèn)狀態(tài) 下，寬度將占據(jù)整行的空間，因此當(dāng)設(shè)置了寬度屬性后，DIV 寬度將變?yōu)樵O(shè)置的寬度。 3 四、 CSS 網(wǎng)頁布局分類 1．一列固定寬度。我們知道內(nèi)容都是有結(jié)構(gòu)的，理解表現(xiàn)和結(jié)構(gòu)相分離，相同的結(jié)構(gòu)的內(nèi)容我們可以用同一個(gè)樣式來定義，比如相當(dāng)級(jí)別的標(biāo)題、正文和圖片。這樣才能在手機(jī)、 PDA 上閱 讀，才能隨時(shí)修改 CSS 實(shí)現(xiàn)改版。通過 CSS 樣式定義每一塊中的內(nèi)容，才表現(xiàn)出來。 使用 WEB 標(biāo)準(zhǔn)的目的是分離內(nèi)容和表現(xiàn)。 CSS 布局就是將原來用 table 的地方用 DIV來替代，原來是表格嵌套，現(xiàn)在是 DIV 嵌套。 DIV 在使用時(shí)不再需要像表格一樣通過單元格來組織版式，通過 CSS 強(qiáng)大 的樣式定義功能可以比表格更簡(jiǎn)單更自由地來控制頁面版式和樣式。 DIV 的功能僅僅是將一段信息標(biāo)記出來用于后期樣式的定義。 DIV 可以理解為層或者是塊。 二、 CSS 布局 使用 CSS 布局可以從根本上解決表格布局帶來的問題。盡管使用 DW 等網(wǎng)頁制作工具進(jìn)行可視化操作，但不可能幫助縮減代碼或刪除重復(fù)的代碼。 表格布局的代碼最常見的是在 HTML 標(biāo)簽中間加入大量的設(shè)計(jì)代碼，如 width=100%，border=0 等，表格布局的混合代碼就這樣編寫的。 一、傳統(tǒng)表格布局的缺陷 傳統(tǒng)表格布局方式實(shí)際上是利用表格元素具有無邊框的特性。 color: black}