5.25日(rì)音(yīn)訊,用(yòng)css橫掃網頁變✔→←€形之一(yī)一(yī)“攻略”

　　5.25日(rì)音(yīn)訊,用(y↓→≥òng)css橫掃網頁變形之一(yī)一(yΩ₹π'ī)“攻略”。網頁變形、錯(cuò)位、不(bù★☆α)兼容等等，都(dōu)是(shì)困擾新老(∞‌‌÷lǎo)前端工(gōng)程師(shī)的(de)問(wè★₹≠n)題，首先我們不(bù)用(yòng)在乎哪種£α浏覽器(qì)對(duì)，哪種錯(cuò)，我們隻要(yào≈€↕γ)了(le)解各種浏覽器(qì)的(de)用(yòng)法，默認值，γδ ♦把它們做(zuò)到(dào)各個(gè)兼容便可(kě∑↕♠↔)，當然這(zhè)是(shì)一(yī)個≠↓(gè)熟練的(de)過程和(hé)實踐經驗來(l↕♣•ái)的(de)，不(bù)是(shì)一(yī)朝一(yī)夕可(→≠kě)成的(de)，當然如(rú)果我們知(zhī)道(dà©≈o)了(le)一(yī)些(xiē)內(nèi)在的(de)知(zhī)識，這∏ (zhè)對(duì)我們的(de)學習(xí)和(hé)制(zhì)作(zuΩπ≥ò)是(shì)大(dà)有(yǒu)好(<∞€hǎo)處的(de)。

　　1.div的(de)垂直居中問(wèn)題

　　2.margin加倍的(de)問(wèn)題

　　<#divid=”imfloat&§β' rdquo;>

　　#imfloat{

　　float:left;

　　margin:5px;

　　3.浮動ie産生(shēng)的(de)雙倍距€€離(lí)

　　這(zhè)裡(lǐ)細說(shuō)一(yī)下(xià✔σ¥)block與inline兩個(gè)元素：blo≤≤ck元素的(de)特點是(shì),總是(shì)在新β×Ω行(xíng)上(shàng)開(kāi)始,高(gāo)度,寬度,♠'¥行(xíng)高(gāo),邊距都(dōu)可(k×÷ě)以控制(zhì)(塊元素);Inline元素的(de)特點是(sh £ì),和(hé)其他(tā)元素在同一(¥↓↔∏yī)行(xíng)上(shàng),不(bù)可(kě)♣•≤♥控制(zhì)(內(nèi)嵌元素);

　　IE不(bù)認得(de)min-這( ←•βzhè)個(gè)定義，但(dàn)實際上(shàng)它把正常的(de)♦Ωwidth和(hé)height當作(zuò)有(yǒu)min的(d±©≈e)情況來(lái)使。這(zhè)樣問(α wèn)題就(jiù)大(dà)了(le)，如(rú)果隻用(yòng)寬度✔"和(hé)高(gāo)度，正常的(de)浏覽器λβ‍(qì)裡(lǐ)這(zhè)兩個(gè)值就(jiù)不(bùπ>)會(huì)變，如(rú)果隻用(yònσ♠♣βg)min-width和(hé)min-height的(de)♥>¥話(huà)，IE下(xià)面根本等于沒有(yǒu)設"™置寬度和(hé)高(gāo)度。

　　#box{width:80px;he₹≤‍∑ight:35px;}html>bod™αy#box{width:auto;height:auto;min-width:≥→"¥80px;min-height:35px;}

　　5.頁面的(de)最小(xiǎo)寬度

　　#container{min-width:600px;width:✔↓÷₩expression_r(document.b¶↓& ody.clientWidth＜600?"60σ∞<₽0px":"auto");}

　　第一(yī)個(gè)min-width是(shì)正常的Ω♦(de)；css制(zhì)作(zuò)但(dàn)↕λ第2行(xíng)的(de)width使用(™ε&↔yòng)了(le)Javascript，這(zhè)隻↑£§÷有(yǒu)IE才認得(de)，這(zhè)也(yě)會(huì)讓你βα∏(nǐ)的(de)HTML文(wén)檔不(bù)太正規。它實際上→≈​(shàng)通(tōng)過Javascript的(∑∑de)判斷來(lái)實現(xiàn)最小(x♣Ω≤iǎo)寬度。

　　#left{float:left;width:50%;}

　　*html#left{margin-right:-3px;//這(↕¶‌πzhè)句是(shì)關鍵}

　　<divid="right"&g♠‍πt;＜/div>

　　</div>

　　7.IE捉迷藏的(de)問(wèn)題

　　當div應用(yòng)複雜(zá)的(de)時(shí)候每 ≠ 個(gè)欄中又(yòu)有(yǒu)一(yī)些(xiē)鏈接，> &DIV等這(zhè)個(gè)時(shí)候容易發生( ​shēng)捉迷藏的(de)問(wèn)題。

　　①例如(rú)：＜#divid=”f<↕€δloatA”>＜#divid=”float‍←≠​B”>＜#divid=”NOTfloatC&↕÷rdquo;>這(zhè)裡(lǐ)的(de)NOTfloatC"$ $并不(bù)希望繼續平移，而是(shì)​<↓♠希望往下(xià)排。(其中floatA、•©floatB的(de)屬性已經設置為(wèi)flo  at:left;)

　　這(zhè)段代碼在IE中毫無問(wèn)題，問(wèn)題出在∏  ↔FF。原因是(shì)NOTfloatC并非fl"←♠oat标簽，必須将float标簽閉合。在＜#divcla∏↔→ss=”floatB”>＜#di>↓vclass=”NOTfloatC‌©Ω”>之間(jiān)加上(shàng)＜#div₽₹class=”clear”>這(zhè)個(g✔≠✘♥è)div一(yī)定要(yào)注意位置™♦↓，而且必須與兩個(gè)具有(yǒu)float屬性的(de)div同級 ±，之間(jiān)不(bù)能(néng)存在嵌套關系，否則會(huγ≈≤ì)産生(shēng)異常。并且将clear這(zhè)種™•∞₩樣式定義為(wèi)為(wèi)如(rú)下(xià)≈¥≥即可(kě)：.clear{clear:both;}

　　②作(zuò)為(wèi)外(wài)部wrapper的(de)d®✘iv不(bù)要(yào)定死高(gāo)÷←←§度,divcss制(zhì)作(zuò)為(wèi)了(l₩φe)讓高(gāo)度能(néng)自(zì)動适應，要(yào)在wrap✔£per裡(lǐ)面加上(shàng)overflow↕★★ :hidden;當包含float的(de)box的(de)時(♠≈→∑shí)候，高(gāo)度自(zì)動适應在IE下(xià)無效，這(zhè)׶&'時(shí)候應該觸發IE的(de)lay↓→​out私有(yǒu)屬性(萬惡的(de)IE啊！)用(yòng)zoom:€‍©λ1;可(kě)以做(zuò)到(dào)，這(zhè)樣就(jiù)™↑™達到(dào)了(le)兼容。

　　.colwrapper{overflow:hidden;zoom:1;m♦<•↔argin:5pxauto;}

　　<divid=”page”>

　　<divid=”left”>＜/←≈div>

　　<divid=”center”>♥$₽€＜/div>

　　</div>

　　比如(rú)我們要(yào)将page的(de)背景設$☆置成藍(lán)色,以達到(dào)所有(yǒu)三欄的(de)背景α&♦'顔色是(shì)藍(lán)色的(de)目的(de),但£✘(dàn)是(shì)我們會(huì)發現$♦€(xiàn)随著(zhe)leftcenterrig≈→ht的(de)向下(xià)拉長(cháng),而pag♠¥ e居然保存高(gāo)度不(bù)變,問(w×πèn)題來(lái)了(le)css制(zhì)作(zuò),原因在于pa£λφge不(bù)是(shì)float屬性,而我們的(de)pageα ↔♦由于要(yào)居中,不(bù)能(néng)設​∞™σ置成float,所以我們應該這(zhè)樣解決

　　<divid=”page”&g§×↑<t;

　　<divid=”bg”style=&rπ≤≤dquo;float:left;width:100%”>

　　</div>

　　再嵌入一(yī)個(gè)floatleft而寬度是(shì)10↑↓₩0%的(de)DIV解決之道(dào)。

　　④萬能(néng)float閉合(非常重要(y♥ ào)!)

　　.clearfix:after{conte÷✘€nt:".";display:block;heigh™Ωt:0;clear:both;visibility:hidden•±>§;}

　　.clearfix{display:inline-block;​∑✘∞}

　　或者這(zhè)樣設置：.hackbox{display:ta∑₹  ble;//将對(duì)象作(zuò)為(wèi)塊元>↑¥素級的(de)表格顯示}

　　高(gāo)度不(bù)能(néng ‌)自(zì)适應是(shì)當內(nèi)層對↓‍✔(duì)象的(de)高(gāo)度發生(shēng)變化(huà)時(sσγ∑€hí)外(wài)層高(gāo)度不(bù)能(néng)自(zì)≥↕動進行(xíng)調節，特别是(shì)當內(nèi)層對( ÷ βduì)象使用(yòng)margin或paddign時(shí)。

　　例：

　　<divid="box&qu♥←∞≠ot;>

　　<p>p對(duì)象中♦©↔≥的(de)內(nèi)容＜/p>

　　解決技(jì)巧：在P對(duì)象上(shàng)下(xià∏​♣÷)各加2個(gè)空(kōng)的(de)div對(duì)象CSS代碼：.1'‌ε≤{height:0px;overflow:hidden;}或者為(wèi)D↕λφ↕IV加上(shàng)border屬性。

　　10.div+css之IE6下(xià)為(wèi)什(sh≠↓¶én)麽圖片下(xià)有(yǒu)空(kōng)隙産生©÷§α(shēng)

　　解決這(zhè)個(gè)BUG的(de)技(jì)巧δ☆也(yě)有(yǒu)很(hěn)多(d±>λ‌uō),可(kě)以是(shì)改變htm$λ♥δl的(de)排版,或者設置img為(wèi)displa ​y:block或者設置vertical-align屬性為(wèi)vertic‍≥al-align:top

　　11.如(rú)何對(duì)齊文(wén)本與文(wén‍  )本輸入框

　　加上(shàng)vertical-align:middle;

　　<!--

　　input{

　　width:200px;

　　height:30px;

　　border:1pxsolidred;

　　-->

　　</style>

　　CSSID的(de)優先級要(yào)高(♣ ♦ gāo)于class,看(kàn)上(shàng)面的(de)例子(zǐ)

　　text-overflow:ellipsis;

　　-o-text-overflow:ellips>≤≥​is;

　　overflow:hidden;

　　-->

　　14.為(wèi)什(shén)麽web标準中IE無εβ法設置滾動條顔色了(le)

　　解決辦法是(shì)将body換成html

　　<!DOCTYPEhtmlPUBLIC"-//W3C/≥♣™ /DTDXHTML1.0Strict//EN"http://www. "w3.org/TR/xhtml1/DTD/xhtml≠¶↑÷1-strict.dtd>

　　<metahttp-equiv="¥"¶;Content-Type"content="text/h‌®"tml;charset=gb2312"≥β×₩/>

　　<styletype="text'÷•/css">

　　scrollbar-face-color:#f★​6f6f6;

　　scrollbar-highlight-&β₹₹color:#fff;

　　scrollbar-3dlight-color:#eeeeeeα¥;

　　scrollbar-darkshadow-color:#fff;<©★

　　15.為(wèi)什(shén)麽無法定義1p• x左右高(gāo)度的(de)容器(qì)

　　IE6下(xià)這(zhè)個(gè)問(wèn)題是(π•↔£shì)因為(wèi)默認的(de)行(xíφ>♦ng)高(gāo)造成的(de),解決的(de♣←✘)技(jì)巧也(yě)有(yǒu)很(hěn♣↕☆​)多(duō),例如(rú):

　　解決的(de)辦法是(shì)給FLASH設置透明>✔(míng)

　　<styletype=""¶↔€;text/css">

　　div{

　　}

　　-->

　　div設置margin-left,margin-right為(w♥α∞èi)auto時(shí)已經居中，IE不¶₽(bù)行(xíng)，IE需要(yào)設定b®"< ody居中，首先在父級元素定義text-al&&±gin:center;這(zhè)個(gè)的(de)意思就(απjiù)是(shì)在父級元素內(nèi)的(de)內(nèi)容居中。♥↕♦±

　　2.CSS鏈接(a标簽)的(de)邊框與背景

　　被點擊訪問(wèn)過的(de)超鏈接樣式不(bù)在具有(♠✘yǒu)hover和(hé)active了(le),很(hěn)多(d¶α uō)人(rén)應該都(dōu)遇到(dào)過這(zσ§¥ hè)個(gè)問(wèn)題,解決技(jì)巧是(shì)改變CS≠εS屬性的(de)排列順序:L-V-H-A

　　<!--

　　a:link{}

　　a:visited{}

　　a:hover{}

　　a:active{}

　　4.遊标手指cursor

　　ul标簽在FF中默認是(shì)有(yǒu)padding值的♦♥ ☆(de),而在IE中隻有(yǒu)margin默ε'認有(yǒu)值,所以先定義ul{margin:0;φ®¥∏padding:0;}就(jiù)能(néng)解決大(dà)部✘™§分(fēn)問(wèn)題

　　6.FORM标簽

　　div{maring:30px;marg↔✘in:28px}重複定義的(de)話(huà ∑€)按照(zhào)最後一(yī)個(gè)來(lái)執行(xínγ↔&g)，所以不(bù)可(kě)以隻寫margin:xxpx!impo÷≥rtant;#box{width:600p♠€x;//forie6.0-w\idth:500px;//forff+ie6δ↕ .0}

　　#box{width:600px!important/≤​/forffwidth:600px;//forff+ie6.0width₩€λ÷:500px;//forie6.0-}

　　8.屬性選擇器(qì)(這(zhè)個(gè)不(γφπbù)能(néng)算(suàn)是(shì)兼容,是(sh✔εì)隐藏css的(de)一(yī)個(gè)<π↑∑bug)

　　p[id]{}div[id]{}

　　這(zhè)個(gè)對(duì)于IE6™×.0和(hé)IE6.0以下(xià)的(de>§)版本都(dōu)隐藏,FF和(hé)OPer★↕a作(zuò)用(yòng).屬性選擇器(qì)和(hé)子(z±&αǐ)選擇器(qì)還(hái)是(shì)有(yǒu)區(qū) ≠""别的(de),子(zǐ)選擇器(qì)的(de)範圍從(±♠Ω§cóng)形式來(lái)說(shuō)縮小(xiǎo)了(le),‍•∞屬性選擇器(qì)的(de)範圍比較大(d€£ •à),如(rú)p[id]中,所有(yǒu)p标簽中有(yǒu)id↑¥₩ 的(de)都(dōu)是(shì)同樣式的(d <©&e).

　　.tabd1{