1、.用樣式的優(yōu)先級(jí)解決瀏覽器兼容問(wèn)題 摘用樣式的優(yōu)先級(jí)解決瀏覽器兼容問(wèn)題(摘)2010-06-24 18：55在這之前先講解特殊符號(hào)的含義-'+''_''！important'，這類(lèi)特殊符號(hào)是針對(duì)不同瀏覽器識(shí)別的。打個(gè)比方，就象家長(zhǎng)去幼兒園認(rèn)領(lǐng)孩子，看到頭上貼著'+'這個(gè)符號(hào)的，哦，這是ie家的孩子，firefox和opear家長(zhǎng)是不認(rèn)得的，當(dāng)然符號(hào)不止3個(gè)，但有這3個(gè)就能滿(mǎn)足大部分的需要了。'+'加上該符號(hào)的樣式只有ie才會(huì)認(rèn)領(lǐng)'_'加上該符號(hào)的樣式只有ie6才會(huì)認(rèn)領(lǐng)，ie7不會(huì)認(rèn)領(lǐng)'！im

2、portant'在同一條樣式定義中即大括號(hào)中，firefox、opera優(yōu)先認(rèn)領(lǐng)，ie不認(rèn)得即忽略'！important'字符串。在非同一條樣式中即不同的大括號(hào)中標(biāo)有'！important'的樣式對(duì)所有瀏覽器均屬優(yōu)先認(rèn)領(lǐng)。網(wǎng)上有說(shuō)ie不認(rèn)'！important'的，大錯(cuò)特錯(cuò)了。例：style type="text/css".defbackground：yellow；+background：blue；_background：red；/style div class="def"dd/div結(jié)果：ie6下

3、是red色，ie7下是blue色，firefox和opera下是yellow色例：style type="text/css".def2background：black！important；.def1background：yellow；+background：blue；_background：red；/style div class="def1 def2dd/div結(jié)果：所有瀏覽器均black色優(yōu)先原則一：文本從上到下，后出現(xiàn)的樣式優(yōu)先于前面出現(xiàn)的同一樣式例：style type="text/css".def1background：black；.

4、def2background：yellow；/style div class="def2 def1dd/div結(jié)果：所有瀏覽器均yellow色，注意：與class=""引號(hào)內(nèi)的順序無(wú)關(guān)，只看.def1和.def2在聲明時(shí)的順序，.def2后聲明的所以權(quán)重高。優(yōu)先原則二：id聲明(即#開(kāi)頭的樣式)class聲明(即.開(kāi)頭的樣式)標(biāo)簽聲明(即類(lèi)似div開(kāi)頭)以上三種聲明處于不同的量級(jí)，份量上，div開(kāi)頭相當(dāng)于1克重，.開(kāi)頭相當(dāng)于1公斤重，#開(kāi)頭相當(dāng)于1噸重。例：style type="text/css"#bbbackground：pink.defb

5、ackground：black；divbackground：yellow；/style div id="bb"class="def"dd/div結(jié)果：所有瀏覽器均pink色，注意：雖然按優(yōu)先原則一，后出現(xiàn)的權(quán)重高，但那只是在同樣重量級(jí)下的比較，優(yōu)先原則二各重量級(jí)別就不同了。優(yōu)先原則三：數(shù)量取勝。如果同一個(gè)樣式聲明即一個(gè)大括號(hào)由多個(gè)#.或div組成，則權(quán)重按出現(xiàn)符號(hào)的量級(jí)增加比如：#bb#tt#ddbackground：red則重量等于3噸#bb.tt ul.dd libackground：red則重量等于1噸2公斤2克，這么精確的重量，就不需要舉例了吧。

6、再次說(shuō)明：優(yōu)先原則一只適用兩個(gè)樣式聲明同樣重的情況優(yōu)先原則四：'！important'。相當(dāng)于無(wú)限重量，在之前已經(jīng)有說(shuō)明，需要注意：ie下，在同一條樣式聲明即一個(gè)大括號(hào)中出現(xiàn)的！important會(huì)被隨后出現(xiàn)的同名樣式?jīng)_洗掉。style type="text/css".def1background：yellow！important；background：red；.def2background：green；/style div class="def1 def2"dd/div結(jié)果：ie下，green色，background：yellow！im

7、portant被后面的background：red沖洗了，而background：red與background：green的較量中，前者敗在優(yōu)先原則一之下。優(yōu)先原則五：近水樓臺(tái)。div style="background：black"/div直接寫(xiě)在元素體內(nèi)的style優(yōu)先級(jí)別最高！(僅次于！important)用重量來(lái)形容，可以定為百萬(wàn)噸量級(jí)。style type="text/css".def1background：red；/style div class="def1"style="background：black&quo

8、t;dd/div結(jié)果：black色。style type="text/css".def1background：red！important；/style div class="def1"style="background：black"dd/div結(jié)果：red色。style type="text/css".def1background：red！important；/style div class="def1"style="background：black！important"dd

9、/div結(jié)果：black色。注釋?zhuān)海mportant的無(wú)限重量說(shuō)不太通，大家知道，兩個(gè)無(wú)限的數(shù)是沒(méi)法比較大小的，如果兩個(gè)樣式定義都加了！important，是否就無(wú)法比較呢?不是的，所以，請(qǐng)將！important的無(wú)限重量級(jí)理解成千萬(wàn)噸級(jí)別吧。所提供樣式可以分為以下幾類(lèi)：a tag optimization即標(biāo)記優(yōu)化。包括對(duì)body,td,select,input,form,ul,li,img,h3,p的優(yōu)化，有待擴(kuò)充。主要優(yōu)化margin,padding,font-size強(qiáng)調(diào)幾個(gè)比較重要的，也是較常出現(xiàn)引發(fā)問(wèn)題的。Formmargin：0px；有時(shí)頁(yè)面上莫名出現(xiàn)了空白，很多時(shí)候是因?yàn)楹雎?/p>

10、了form的margin Imgborder：0px如果沒(méi)有border：0px；當(dāng)給img/套上a/時(shí)，圖片會(huì)出現(xiàn)丑陋的邊框色I(xiàn)nputfont-size：12px；這可是很重要的哦，沒(méi)有font-size限制的密碼框會(huì)呈現(xiàn)超大的圓點(diǎn)并且撐大input框Body也許大家不會(huì)留意到，如果不加定義font-family：宋體這個(gè)屬性，在font-size：12px下，ie里文字的實(shí)際占高14px，而ff里實(shí)際占高是15px，當(dāng)然即使加了，在opera下文字占高還是不一樣的，這就需要在任何文字情況下不要忘了line-height或height。h1font-size：14px；margin：7px

11、 0px；h2font-size：14px；margin：7px 0px；text-align：lefth3font-size：14px；margin：7px 0px；text-align：centerh1-h3建議所有頁(yè)面加粗的內(nèi)容用h1-h3取代自定義的font-weight，SEO教導(dǎo)我們使用h可以提高搜索效率。b link部分?？梢孕薷幕蛟黾幽阆矚g的鏈接樣式。注意.lk_l atext-decoration：underline！important和.lk_n atext-decoration：none！important的使用c for testing故名思意。當(dāng)你需要做測(cè)試時(shí)，可以用

12、到的，例如，你想看到一個(gè)div的邊框只需要往class里敲入兩個(gè)字母'bd'.lb使用范例：ul class="lb"li/li/ul這樣就能看到ul下所有l(wèi)i的邊框了。d common部分。重頭戲來(lái)了，有必要一個(gè)個(gè)詳細(xì)說(shuō)明了。.clrclear：both為了保留之前的習(xí)慣，做的一次向下兼容。需要說(shuō)明，clear層樣式在.cclear：both；overflow：hidden；+overflow：visible里已經(jīng)重新定義，請(qǐng)盡量使用新樣式，并牢記新樣式只能在單獨(dú)的clear層使用賭東道賭東道賭東道的的的賭東道賭東道賭東道的的的-什么是單獨(dú)的clear層?

13、div class="c"/div就是，除了.c樣式?jīng)]其它c(diǎn)lassName，并且div/內(nèi)為空。為什么要重新定義?完全出于兼容opera考慮，最近才做opera下的兼容，還是源于同事對(duì)opera的推薦。(如嫌麻煩，不必深究，用就行了).lfloat：left；display：inline最常用的屬性了。但注意，新的定義里多了display：inline，由于在當(dāng)前構(gòu)架下，多使用margin布局，而float元素在ie6下有著名的double margin bug，解決方案即給float元素加display：inline，當(dāng)然，所有的float元素都加上這條屬性不是完全沒(méi)問(wèn)

14、題，ul就會(huì)稍微有點(diǎn)問(wèn)題，在后面會(huì)有針對(duì)這類(lèi)問(wèn)題的樣式解決，比起給全局的float元素解決double margin問(wèn)題要省事的多。.fwidth：100%該屬性的作用不言而喻，設(shè)置本層的寬度為上層的寬度。需要強(qiáng)調(diào)：本屬性與padding、border、margin-left、margin-right一起使用要特別小心，這些屬性會(huì)給額外增加元素的實(shí)際寬度，在ie下多余的寬度會(huì)撐大上層元素，而ff和opera下則不會(huì)有撐大現(xiàn)象。.zzoom：1非常重要的一個(gè)樣式，用來(lái)解決ie6下的塊級(jí)元素layout上呈現(xiàn)的多種bug。.hwidth：50%；+width：49.99%跟上面的屬于同類(lèi)，設(shè)置本層

15、寬度為上層寬度的一半，至于為什么49.99%我也不想的，ie6不讓50%通過(guò)嘛。下面是測(cè)試代碼(需要有g(shù)lobal.css樣式文件引用)div class="bd"div class="l hbg h17/div div class="r hbg h17/div/div.b.s.m.g不說(shuō)了，控制文字大小和加粗的。.paposition：absolute定義層為絕對(duì)位置，float元素定義.pa后float屬性失效。既然是絕對(duì)層left、top屬性是必不可少了不然失去了絕對(duì)層的意義，所以不要忘記設(shè)置left，top。絕對(duì)層上層一定記得要套相對(duì)層posit

16、ion：relative，不然，絕對(duì)層left、top屬性參考的對(duì)象會(huì)是最外層的window，在body之外了，誰(shuí)也不希望定義的元素跑到body外面去吧。在相對(duì)層內(nèi)的絕對(duì)層可以隨意定位，配合z-index屬性幾乎可以用html代碼模擬photoshop畫(huà)圖了，_純屬玩笑。.prposition：relative給left、top定值是相對(duì)于本來(lái)應(yīng)該在的位置。一般與.pa配合使用。.dldisplay：inline.dbdisplay：block.dndisplay：none！important以上3個(gè)不想多說(shuō)，重要，非常重要，實(shí)用，非常實(shí)用。div class="bd dn"

17、;/div你只用敲兩個(gè)字母，這一層就沒(méi)了。.infloat：left；display：inline；margin-left：4px；margin-top：4px；width：16px；height：10px；overflow：hidden；background：url(no-repeat"新"圖標(biāo).ihfloat：left；display：inline；margin-left：4px；margin-top：4px；width：16px；height：10px；overflow：hidden；background：url(no-repeat"熱"圖標(biāo)好用！

18、不過(guò)要求前面元素float，記得配合margin屬性調(diào)整位置。示例：div class="bd l23div class="l"ddddddddddddddddddd/div div class="ml7 mt5 in"/div div class="c"/div/div.ohoverflow：hidden隱藏超出的內(nèi)容.tctext-align：center文字居中.bnborder：none！important消除border，有！important加權(quán)。.b_1border：1px solid#B8B8B8.bt_1b

19、order-top：1px solid#ff7300.bt_2border-top：1px dashed#CCC.bt_3border-top：1px dashed#FFB980.bl_1border-left：1px dashed#CCC.bg_1background-color：#FFF1E6.bg_2background-color：#F0F0F0.bg_3background-color：#9ACD68Border和background系列就不說(shuō)了.o_1opacity：.7；filter：alpha(opacity=70).o_2opacity：.9；filter：alpha(opa

20、city=90)兩個(gè)透明屬性，給喜歡透明層的用。.l17line-height：17px；.l20line-height：20px.l23line-height：23px.l15pline-height：150%這里需要強(qiáng)調(diào)，line-height是最常用的屬性之一，出于兼容的考慮頁(yè)面所有文字都應(yīng)該具有l(wèi)ine-height屬性(這一屬性可被子元素繼承，所以不用擔(dān)心浪費(fèi)筆墨)。至于用px還是用%建議用px，不同瀏覽器顯示文字的高度是不一樣的，用%只會(huì)放大這種差異，用px才能消除差異。%到底用不用的上呢?當(dāng)然有用，不考慮高度差異的，象文章內(nèi)容推薦用%當(dāng)選用不同字號(hào)增大的比例是相同的。這樣，com

21、mon部分就結(jié)束了。e布局部分layout.mamargin-left：auto；margin-right：autoDiv居中樣式，這個(gè)屬性可以讓block塊級(jí)元素自身居中，而不是里面的內(nèi)容居中.w778width：778px；margin-left：auto；margin-right：auto.w952width：952px；margin-left：auto；margin-right：auto2個(gè)布局用的樣式，窄布局下用.w778寬布局下用.w952自定義布局用。f列表ul li專(zhuān)用樣式可以說(shuō)這是重中之重了，主頁(yè)級(jí)別的頁(yè)面大部分的內(nèi)容都是做在無(wú)序列表里面的，其龐大的使用規(guī)模，需要有完備的樣式

22、支持。ul.lzb,ul.lzlzoom：1這兩個(gè)樣式包括下面兩個(gè)是zoom在ul里的應(yīng)用ul.lzb lizoom：1；+margin-bottom：-4px針對(duì)ie下ul li元素的margin-bottom：4px的bug(bug出現(xiàn)條件：li里有float元素)使用了該樣式的li其內(nèi)可有浮左、浮右div，并且li內(nèi)可兼容多行結(jié)構(gòu)，這是樣式ul.ll20 li無(wú)法實(shí)現(xiàn)的。(具體案例見(jiàn)xls文檔)ul.lzl lizoom：1；+margin-left：-16px這個(gè)樣式的出現(xiàn)有些不得已，記得前面說(shuō)過(guò)，為了避免ie6下的double margin bug，我們給所有的float元素額外加上

23、了display；inline，這導(dǎo)致float屬性的ul在ie下出現(xiàn)意料之外的縮進(jìn)問(wèn)題，只能再增加這個(gè)樣式來(lái)解決這一問(wèn)題。ul.ll20 liline-height：20px；height：20px；+margin-bottom：-4pxul.ll23 liline-height：23px；height：23px；+margin-bottom：-4px以上兩個(gè)樣式適用于固定高度的單行l(wèi)i，什么是單行l(wèi)i?指的是li中的文字無(wú)換行。和height等值的line-height讓li中文字垂直居中。使用了這個(gè)樣式的li其內(nèi)可以有浮左、浮右div，是解決單行l(wèi)i兼容的比較好的方式。ul.li20 l

24、ibackground：url(5px 7px no-repeat；padding-left：15pxul.li23 libackground：url(5px 10px no-repeat；padding-left：15px這兩個(gè)樣式?jīng)]什么好說(shuō)的，分別針對(duì)li高度20px和23px的li背景樣式，背景其實(shí)就是一個(gè)no repeat的方點(diǎn)。ul.ll lifloat：left；display：inlineul.lr lifloat：right；display：inline想讓一個(gè)個(gè)li象火車(chē)一樣首位相接嗎?用上面兩個(gè)樣式吧，讓所有的li浮起來(lái)。ul.ldl lidisplay：inline這個(gè)樣

25、式我不太喜歡，同樣可以讓li象火車(chē)一樣首位相接，但是代價(jià)太大，所有的li都變成inline了，很多css樣式對(duì)inline的元素?zé)o效，包括最基本的width、height、margin-top ul.lbt liborder-top：1px dashed#CCCul.lbl_1 liborder-left：1px solid#000兩個(gè)給li加邊框的樣式，給了li更好的分隔效果。這樣，ul li專(zhuān)用樣式部分就結(jié)束了。g樣式margin control.h1pheight：1%.h1height：1px；overflow：hidden.h16height：16px.h17height：17px.

26、m1margin：1px.m7margin：7px.m14margin：14px.ml3margin-left：3px.ml5margin-left：5px.ml7margin-left：7px.ml9margin-left：9px.ml14margin-left：14px.ml18margin-left：18px.ml21margin-left：21px.mr3margin-left：3px.mr5margin-left：5px.mr7margin-right：7px.mr9margin-right：9px.mr14margin-right：14px.mr18margin-right：18p

27、x.mr21margin-right：21px.mt1margin-top：1px.mt3margin-top：3px.mt5margin-top：5px.mt7margin-top：7px.mt9margin-top：9px.mt11margin-top：11px.mt14margin-top：14px.mt21margin-top：21px.mt28margin-top：27px.p7padding：7px.p14padding：14px.pt7padding-top：7px.pt14padding-top：14px以上所有樣式都是用來(lái)留白的，height和margin的組合可以實(shí)現(xiàn)1px

28、-31px的垂直方向留白連續(xù)值(除了13這個(gè)不吉利數(shù)字)，更多的情況我們會(huì)單獨(dú)使用margin，注意margin能夠使用的值。最后的幾個(gè)padding樣式需要說(shuō)明，記得我在前面說(shuō)過(guò)用margin取代padding，這里不得不食言了，對(duì)于有3個(gè)border的碗狀容器，即border-top；none的容器，對(duì)碗內(nèi)的第一個(gè)子層使用margin-top似乎無(wú)法達(dá)到你的期望效果，那就對(duì)碗使用padding-top吧，本層的padding相當(dāng)于子層的margin。h組合樣式.vm,.vmbheight：100px.vmposition：relative.vmaposition：absolute；bord

29、er：none！important；top：0px；+top：50%；display：table.vmb+position：relative；+top：-50%；display：table-cell；vertical-align：middle；+height：auto！important沒(méi)什么要說(shuō)的，要看效果請(qǐng)打開(kāi)border.plfloat：left；text-align：center；padding-bottom：4px；background：#fff；border：1px solid#ccc.pl imgdisplay：block；margin：7px；border：1px solid#

30、ccchtml body.plmargin-bottom：-1pxmedia all and(min-width：0px).plmargin-bottom：0px！important；沒(méi)什么好說(shuō)的，試驗(yàn)下代碼即可，實(shí)用的東西一般很簡(jiǎn)單。這里最后兩行值得注意，倒數(shù)第二行firefox和opera可識(shí)別；最后一行只有opera能識(shí)別。.shposition：relative；background：#ACACAC；.sh.shamargin：0px 2px 2px 0px；background：#fff；.sh.shbposition：absolute；top：0px；right：0px；width：2px；height：2px；overflow：hidden；background：#fff；.sh.shcposition：absolute；