5.25日(rì)音(yīn)訊,用(yòng)css橫掃網頁變形之π≥≤'一(yī)一(yī)“攻略”

　　5.25日(rì)音(yīn)訊,用(yòng)css  橫掃網頁變形之一(yī)一(yī)“攻略&rdqu€♥o;。網頁變形、錯(cuò)位、不(bù)兼容等等，都(d≥λ÷ ōu)是(shì)困擾新老(lǎo)前端工(gōng)程師(shī)的(d γe)問(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è)對(d •σuì)我們的(de)學習(xí)和(hé)制(zhì)作(zuò)是(s♠♠€♥hì)大(dà)有(yǒu)好(hǎo)處的(de)ππ。

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

　　vertical-align:middle;将行(xíng♥✘≤®)距增加到(dào)和(hé)整個(gè)DIV一(yī)樣高(gāo) ∑line-height:200px;然後插入文(wén)字，就(jiù)≠<垂直居中了(le)。缺點是(shì)要(yào> Ωφ)控制(zhì)內(nèi)容不(bù)要(yào)換 ≥ 行(xíng)

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

　　設置為(wèi)float的(de)p在ie下(xià)設≥™φ↓置的(de)margin會(huì)加倍。這(zhè)是♣←​(shì)一(yī)個(gè)ie6都(dō×‌ε£u)存在的(de)bug。解決方案是(shì)在這♠•≈(zhè)個(gè)p裡(lǐ)面加上(shàn±↓↓g)display:inline;

　　例如(rú)：

　　<#pid=”imfloat”>

　　相(xiàng)應的(de)css為(wèi)

　　#imfloat{

　　float:left;

　　margin:5px;

　　display:inline;}

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

　　#box{float:left;wiσ ←dth:100px;margin:000100px;//±σ♠這(zhè)種情況之下(xià)IE會(huì)産生(₽☆'shēng)200px的(de)距離(lí)di♥‍®splay:inline;//使浮動忽略}

　　這(zhè)裡(lǐ)細說(shuō)一(yī)下(xià)b↕•lock與inline兩個(gè)元素：block元素的(de)特點是(shì£$ ),總是(shì)在新行(xíng)上(shànγ∏ g)開(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)嵌元素);£→™<

　　#box{display:block;//可(kě)以為(™®→αwèi)內(nèi)嵌元素模拟為(wèi)塊元素display:inliσβ♣αne;//實現(xiàn)同一(yī)行(xíng)排列的δ₽(de)效果diplay:table;

　　4IE與CSS寬度和(hé)CSS高(gāo)↓'δ度的(de)問(wèn)題pcss技(jì)巧

　　IE不(bù)認得(de)min-這(zhè)個(₹  ✘gè)定義，但(dàn)實際上(shàng)它把正常的(de)width和≈₩>£(hé)height當作(zuò)有(yǒu)min的(de)情♣εφ況來(lái)使。這(zhè)樣問(wèn)題± 就(jiù)大(dà)了(le)，如(rú)果隻用(yòng)寬度和(hé)高¥<∞±(gāo)度，正常的(de)浏覽器(qì)裡(lǐ)這(zhè)兩®≠個(gè)值就(jiù)不(bù)會(huì)變，如(rú)果隻用(yòng‍↔  )min-width和(hé)min-height的(de)☆♣✔話(huà)，IE下(xià)面根本等于沒有(yǒu)設置±↓寬度和(hé)高(gāo)度。

　　比如(rú)要(yào)設置背景圖片，這(zhè)個(gè)寬度是∞↓(shì)比較重要(yào)的(de)。要(yào)解決$£≈•這(zhè)個(gè)問(wèn)題，可↕÷(kě)以這(zhè)樣：

　　#box{width:80px;height:35px;}html★®≤>body#box{width:auto;heightγ≥¥∏:auto;min-width:80px;min-he£≈₽ight:35px;}

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

　　min-width是(shì)個(gè)非常方便的∞≈×(de)CSS命令，它可(kě)以指定元≥★素最小(xiǎo)也(yě)不(bù)能(né €ng)小(xiǎo)于某個(gè)寬度，這(zhè)樣就(jiù)能(nénδ"'g)保證排版一(yī)直正确。但(dàn)IE不(bù™δ♠)認得(de)這(zhè)個(gè)，而它實際上(sh$Ωàng)把width當做(zuò)最小(xiǎo)寬度來♦&ε®(lái)使。為(wèi)了(le)讓這(zhè)一(yī)命令在IE✔↓上(shàng)也(yě)能(néng)用(yòng✔♠♥×)，可(kě)以把一(yī)個(gè)＜p>放(fàng)到(dào$&↔★)＜body>标簽下(xià)，然後為(wèi)p指定一(yī)個(₽<gè)類,然後CSS這(zhè)樣設計(jì)：

　　#container{min-width:↓•≠§600px;width:expression_↕☆•​r(document.body.client↔∏©Width＜600?"600px":"auto");}

　　第一(yī)個(gè)min-widt₹§‌h是(shì)正常的(de)；css制(zhì)α‌ 作(zuò)但(dàn)第2行(xíng)的(de)wid↕∏th使用(yòng)了(le)Javascript，這(zhè)隻有≥∏ (yǒu)IE才認得(de)，這(zhè)也(yě)會(hλ↕ ‌uì)讓你(nǐ)的(de)HTML文(wén)檔不(bù)÷ ≠太正規。它實際上(shàng)通(tōn↑∞g)過Javascript的(de)判斷來(lái•©£)實現(xiàn)最小(xiǎo)寬度。

　　6.DIV浮動IE文(wén)本産生(shēng)3象φ♦ ∑素的(de)bug

　　左邊對(duì)象浮動，右邊采用(yòng)外(wài)∑&'補丁的(de)左邊距來(lái)定位，右邊對(duì)☆¥φ象內(nèi)的(de)文(wén)本會(huε↔ ≈ì)離(lí)左邊有(yǒu)3px的(de)間(jiān)距.

　　#box{float:left;widt≠§h:800px;}

　　#left{float:left;widt± λh:50%;}

　　#right{width:50%;}↕♣β‌

　　*html#left{margin-right:-3px;//這(zhè↑÷☆♣)句是(shì)關鍵}

　　

　　＜/p>

　　＜/p>

　　

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

　　當p應用(yòng)複雜(zá)的(de)時(shí)候每個(gè)欄中←δ又(yòu)有(yǒu)一(yī)些(xiē)鏈接，<πDIV等這(zhè)個(gè)時(shí)©‌候容易發生(shēng)捉迷藏的(de)問(wèn∑Ω)題。

　　有(yǒu)些(xiē)內(nèi)容顯示不(bù)出來(l₩§ ™ái)，當鼠标選擇這(zhè)個(gè)區(qū)域是(s ✔¥​hì)發現(xiàn)內(nèi)容确實在頁面。≤¥∑解決辦法：對(duì)#layout使用(yòng)l↑<ine-height屬性或者給#layout使用(yòng)固定☆✘✘↑高(gāo)和(hé)寬。頁面結構盡量簡單。

　　8.float的(de)p閉合;清除浮動;自(zì)适應高±★'(gāo)度

　　①例如(rú)：＜#pid=”flo∞≤ε®atA”>＜#pid=&rdqu©₹o;floatB”>＜#pid=”NOTfΩ↑∏loatC”>這(zhè)裡(lǐ)的(de)NOTfloatC并Ω£ ≥不(bù)希望繼續平移，而是(shì)希÷​望往下(xià)排。(其中floatA、floatB​'∏的(de)屬性已經設置為(wèi)float:left;•σ©)

　　這(zhè)段代碼在IE中毫無問(wèn)題，問(wèn)題出在∏'FF。原因是(shì)NOTfloatC并非float标簽，≥₽ €必須将float标簽閉合。在＜#pcla→↕♣∑ss=”floatB”>＜#pclaΩ$↕'ss=”NOTfloatC&rdqu→Ω♥o;>之間(jiān)加上(shàng)＜#pclass=& £<≥rdquo;clear”>這(zhè)個(gè)p一(yī)↓​定要(yào)注意位置，而且必須與兩個(gè)具有∞≤↓ (yǒu)float屬性的(de)p同級，之間(jiān)不(bù)能(né≈↑ng)存在嵌套關系，否則會(huì)産生(shēng)✔✘$異常。并且将clear這(zhè)種樣式定義為(wèi)為(wèi)如(rú)'ασ¶下(xià)即可(kě)：.clear{clear:bot<<÷h;}

　　②作(zuò)為(wèi)外(wài)部wrapper的(de)p不(b÷π≈$ù)要(yào)定死高(gāo)度,pcss制(zh§‌ì)作(zuò)為(wèi)了(le)讓高(gāo)度能(néng)自Ω$(zì)動适應，要(yào)在wrappe ∏r裡(lǐ)面加上(shàng)overflow:hidden;當包含fl£>oat的(de)box的(de)時(shíγ÷σ©)候，高(gāo)度自(zì)動适應在IE下(xià)無效，這(zhè)≥≠時(shí)候應該觸發IE的(de)layou♥$t私有(yǒu)屬性(萬惡的(de)IE✔$∑→啊！)用(yòng)zoom:1;可(kě)以&<Ω≈做(zuò)到(dào)，這(zhè)樣就₽±§(jiù)達到(dào)了(le)兼容。

　　例如(rú)某一(yī)個(gè)wrapper如(rú)♠β'>下(xià)定義：

　　.colwrapper{overflow'ε‌:hidden;zoom:1;margin:5pxauto;}

　　③對(duì)于排版,我們用(yòng)得(de)最多(dε'₩uō)的(de)css描述可(kě)能(néng)就(jiù)是(s≈γ✔hì)float:left.有(yǒu)的(de)時(α→€<shí)候我們需要(yào)在n欄的(de)floatp後©¥ε面做(zuò)一(yī)個(gè)統一(yī)的(de)背景,₹€譬如(rú):

　　

　　＜/p>

　　＜/p>

　　＜/p>

　　

　　比如(rú)我們要(yào)将page的★α(de)背景設置成藍(lán)色,以達到(dà¶‌o)所有(yǒu)三欄的(de)背景顔色是(shìγ∏)藍(lán)色的(de)目的(de),但(dàn)是(shì)我們會(hu>∑♥£ì)發現(xiàn)随著(zhe)leftcenterr¶♥ight的(de)向下(xià)拉長(cháng),而p♣©<‍age居然保存高(gāo)度不(bù)變,問(wèn)題↑Ωδ®來(lái)了(le)css制(zhì)作(zuò),原因在于≠>∞₹page不(bù)是(shì)float屬性, →£ε而我們的(de)page由于要(yào)居中,不(bù)能(néng)設置<π¥₩成float,所以我們應該這(zhè)樣解決

　　

　　

　　＜/p>

　　＜/p>

　　＜/p>

　　

　　

　　再嵌入一(yī)個(gè)floatleft而寬度是(shìγ")100%的(de)DIV解決之道(dào)。

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

　　關于clearCSSfloat的(de)原理(lǐ)可(kě)參見(₩✔σjiàn)[HowToClearFloatsWithoutStruct​©♠uralMarkup],将以下(xià)代碼加入GlobalCSS中,給♦±需要(yào)閉合的(de)p加上(shàng)class="clea$  €rfix"即可(kě),屢試不(bù)爽.

　　.clearfix:after{content:"."; ±©display:block;height:0;clear:both;visi™​‌bility:hidden;}

　　.clearfix{display:inΩ↔line-block;}

　　.clearfix{display:block;}

　　或者這(zhè)樣設置：.hackbox{display:table;¥ε//将對(duì)象作(zuò)為(wèi)塊元素級的(de)表格顯∏₩↔示}

　　9．高(gāo)度不(bù)能(néng)自(zì☆∞σ✘)适應

　　高(gāo)度不(bù)能(néng)自(z¶×ì)适應是(shì)當內(nèi)層對(duì)象的(de)高(gā♥™σ↓o)度發生(shēng)變化(huà)時(shí)外β∏®←(wài)層高(gāo)度不(bù)能(néng)自(zì)動進行(xí•♥ng)調節，特别是(shì)當內(nèi)層對(duì)象使♦↓<±用(yòng)margin或paddign時‍€δ↓(shí)。

　　例：

　　#box{background-color:#eee;}"" 

　　#boxp{margin-top:20p↑✘δx;margin-bottom:20px;text♣ ‌-align:center;}

　　

　　

p對(duì)象中的(de)內(nèi)容＜↓☆/p>

　　

　　解決技(jì)巧：在P對(duì)象上(shàng≈₽)下(xià)各加2個(gè)空(kōng)的(de&Ω≈★)p對(duì)象CSS代碼：.1{height:0px;over><∞flow:hidden;}或者為(wèi)DIV加上(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)多(duō),可(kě)±₹ε₩以是(shì)改變html的(de)排版,或者設置img為(wèi)dis♣★•play:block或者設置vertical-align屬性為(wè¥ ↔€i)vertical-align:top

　　bottommiddletext-bottom都(d©♠φφōu)可(kě)以解決.

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

　　加上(shàng)vertical-align:mi©♣™¶ddle;

　　

　　

　　

　　12.web标準中定義id與class區(∑₹qū)别嗎(ma)

　　(1).web标準中是(shì)不(bù)容許重複IDγ☆$的(de),比如(rú)pid="aa"不(bù)容許重複2次,而CSSc€<lass定義的(de)是(shì)類,理(lǐ)論上∑÷α"(shàng)可(kě)以無限重複,這(zhè)樣需要(yào♠™)多(duō)次引用(yòng)的(de)定義便可(kěβ₽‌↓)以使用(yòng)他(tā).

　　(2).屬性的(de)優先級問(wèn)題®™

　　CSSID的(de)優先級要(yào)≠‍₽​高(gāo)于class,看(kàn)上(≤₩ shàng)面的(de)例子(zǐ)

　　(3).方便JS等客戶端腳本,如(rú)果 ≤在頁面中要(yào)對(duì)某個(gè)對(duì)象©♥¶進行(xíng)腳本操作(zuò),那(nà)♥☆π麽可(kě)以給他(tā)定義一(yī)個(g‍∞↓è)ID,否則隻能(néng)利用(yòng★¶)遍曆頁面元素加上(shàng)指定特定屬性來(lái)找到(dào)它 ‍,這(zhè)是(shì)相(xiàng)對(duì)浪費(fèi)時↓±γ(shí)間(jiān)資源,遠(yuǎn)遠≤ '(yuǎn)不(bù)如(rú)一(yī)個π♦(gè)ID來(lái)得(de)簡單。

　　13.LI中內(nèi)容超過長(cháng)度後以省略号顯示的(de)±≤¥←技(jì)巧

　　此技(jì)巧适用(yòng)與IE與OP浏覽器(qì)

　　

　　

　　

　　14.為(wèi)什(shén)麽weδ'™‌b标準中IE無法設置滾動條顔色了(le)±‌§

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

　　

　　

　　

　　

　　＜/style>

　　15.為(wèi)什(shén)麽無法定義1px左右高αε₹‍(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ú)×♦™:

　　overflow:hiddenzoom:0↔↕.08line-height:1px

　　16.怎麽樣才能(néng)讓層顯示在FLASH之上(shà↓÷‍γng)呢(ne)

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

　　

　　17.怎樣使一(yī)個(gè)層垂直居中于浏​♣覽器(qì)中

　　這(zhè)裡(lǐ)我們使用(yòng)百分(fēn)比絕對(duì>£Ω>)定位,與外(wài)補丁負值的(de)技(jì)巧,負值的(de)大(d÷←→à)小(xiǎo)為(wèi)其自(zì)身(shēn)寬度高(gāo)度除以α↓二

　　

　　

　　

　　Firefox與IE的(de)CSα≠‌ S兼容CSSHACK技(jì)巧

　　1.Div居中問(wèn)題

　　p設置margin-left,margin-righ↑π✘¥t為(wèi)auto時(shí)已經居中，IE不(bù)行∏δ'(xíng)，IE需要(yào)設定body居中Ω£→，首先在父級元素定義text-algin:center;這(zhè)個( ©>gè)的(de)意思就(jiù)是(shì)在父級元素內(<®nèi)的(de)內(nèi)容居中。

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

　　a鏈接加邊框和(hé)背景色，需設置display:block→✘♣,同時(shí)設置float:left保證不(bù)換∞™行(xíng)。參照(zhào)menub₹≤ar,給a和(hé)menubar設置高(gāo)度是(shì)←•¥為(wèi)了(le)避免底邊顯示錯(cuε&£₹ò)位,若不(bù)設height,可(kě)以在menubar中插入一(yī←α★")個(gè)空(kōng)格。

　　3.超鏈接訪問(wèn)過後hov££er樣式就(jiù)不(bù)出現(xiàn)的(de)問(wèn)題♥₽ γ

　　被點擊訪問(wèn)過的(de)超鏈接樣式不(bù)在具有(yǒu)ho♦<ver和(hé)active了(le),很(₩↔₹hěn)多(duō)人(rén)應該都(dō÷πu)遇到(dào)過這(zhè)個(gè)問(wèn)題,解決技© ★"(jì)巧是(shì)改變CSS屬性的(de)排列順序:L-V-H-A

　　Code:

　　

　　

　　

　　4.遊标手指cursor

　　cursor:pointer可(kě♥‍)以同時(shí)在IEFF中顯示遊标手指狀，↕φhand僅IE可(kě)以

　　5.UL的(de)padding與margin

　　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标簽

　　這(zhè)個(gè)标簽在IE中,₩£¥将會(huì)自(zì)動margin一"φ€§(yī)些(xiē)邊距,而在FF中margin則是(shì)0,因此,如(r✘•∏ú)果想顯示一(yī)緻,所以最好(hǎo)在css中指定margin和(εβ✔>hé)padding,針對(duì)上(shàng)面兩個(gè)€®®問(wèn)題,我的(de)css中一(yī)♥₽←般首先都(dōu)使用(yòng)這(z§←hè)樣的(de)樣式ul,form{margin:0;p±♠×adding:0;}給定義死了(le),所以後面就('"jiù)不(bù)會(huì)為(wèi"β♦×)這(zhè)個(gè)頭疼了(le).

　　7.BOX模型解釋不(bù)一(yī)緻問(wèn)題

　　在FF和(hé)IE中的(de)BOX模型解釋不(bù)一(yī)緻導<↕λ緻相(xiàng)差2px解決技(jì)✘δ巧：p{margin:30px!important;margin☆∞♥ :28px;}注意這(zhè)兩個(gè)margin的(de)順序®‍₽一(yī)定不(bù)能(néng)寫反，important這(zhè)∑&個(gè)屬性IE不(bù)能(néng)識别，但(dàn)别‌§>的(de)浏覽器(qì)可(kě)以識别。所以在IE下(≤≥αxià)其實解釋成這(zhè)樣：

　　p{maring:30px;margin:28px}重複定義★↕的(de)話(huà)按照(zhào)最後一(yī)個(gè>↕)來(lái)執行(xíng)，所以不(bù)可(kě)以隻寫ma§≤rgin:xxpx!important;#$™✘¶box{width:600px;//forie6.0-wi↔'dth:500px;//forff+ie​δ6.0}

　　#box{width:600px!important//forffw ¥idth:600px;//forff+ie6.0wid✘∏→↕th:500px;//forie6.0-}

　　8.屬性選擇器(qì)(這(zhè)個(gè)不(bù)能(néλ∏ng)算(suàn)是(shì)兼容,是(shì)隐藏css的(de)一(y±& ₩ī)個(gè)bug)

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

　　這(zhè)個(gè)對(duì)于IE6.0和(hé"↓₽)IE6.0以下(xià)的(de)版本都(dōu)隐藏,FFπ±和(hé)OPera作(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≤✘ì)同樣式的(de).

　　9.最狠的(de)手段-!important

　　如(rú)果實在沒有(yǒu)辦法解決 ≈&一(yī)些(xiē)細節問(wèn)題,可(kě)以用(yòng< )這(zhè)個(gè)技(jì)巧.F"♠π₩F對(duì)于”!important&☆™•rdquo;會(huì)自(zì)動優先解析,然而>₹αIE則會(huì)忽略.如(rú)下(xià)

　　.tabd1{

　　background:url(images/up/ta§•∞≠b1.gif)no-repeat0px0px!impor↓✔tant;

　　background:url(image☆≈×™s/up/tab1.gif)no-repea'≤εt1px0px;}

　　值得(de)注意的(de)是(shì)，一(yī)定要(δπβyào)将xxxx!important這(zhè)句放(fàng)φλ 置在另一(yī)句之上(shàng)。