愛華網(wǎng)DIV+CSS常見問題
1、如何定義高度很小的容器？
在IE6下無法定義小高度的容器，是因?yàn)橛幸粋€(gè)默認(rèn)的行高。
列舉2種解決方案：overflow:hidden | line-height:0
2、圖片下方出現(xiàn)幾像素的空白間隙？
這個(gè)也有多種解決方案，如將img定義為display:block,或定義父容器為font-size:0，個(gè)人更推薦使用vertical-align的方式，它的值可以是text-top| text-bottom | middle等
3、IE6雙倍margin的BUG?
display:inline
4、文本垂直方向?qū)R文本輸入框？
設(shè)置input為vertical-align:middle，textarea也是如此
5、為什么在web標(biāo)準(zhǔn)下ie無法設(shè)置滾動(dòng)條的顏色？
將設(shè)置滾動(dòng)條顏色的樣式定義到html標(biāo)簽選擇符上即可
6、如何讓層在falsh上顯示？
不可以，除了少數(shù)幾個(gè)級別很高的家伙除外。
但可以將flash設(shè)置為透明，這時(shí)層就會(huì)透過falsh顯示，近似于覆蓋在flash之上了，如：
7、如何使得文字不換行？
定義包含文字的容器為：width:xxx;white-space:nowrap;
8、ie中如何讓超出寬度的文字顯示為省略號？
定義容器為：overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;
9、如何在點(diǎn)文字時(shí)也選中checkbox?
10、一個(gè)div為margin-bottom:10px，一個(gè)div為margin-top:5px，為什么2個(gè)div之間的間距是10px而不是15px?
這種情況瀏覽器會(huì)自動(dòng)進(jìn)行margin重疊，只顯示較大的margin值
解決方案：只設(shè)置其中一個(gè)div的margin為15px
11、如何解決ie下當(dāng)li中出現(xiàn)2個(gè)或以上的浮動(dòng)時(shí)，li之間產(chǎn)生的空白間隙？
設(shè)置li的vertical-align，值可以為top | text-top | middle | bottom |text-bottom
12、如何使得英文單詞不發(fā)生詞內(nèi)斷行？
word-wrap:break-word;
13、為什么被訪問過的鏈接顏色沒有變化？
定義鏈接的樣式時(shí)，需要按照:link,:visited,:hover,:active這樣的順序，可以使用LoVeHAte（喜歡討厭）來記憶
14、單行文本如何垂直居中？
height:xxx;line-height:xxx; 高和行高相同即可
15、已知高度的容器如何在頁面中水平垂直居中？
參閱：
16、未知尺寸的圖片圖如何水平垂直居中？
參閱：
17、標(biāo)準(zhǔn)模式和怪異模式下的盒模型區(qū)別？
標(biāo)準(zhǔn)模式下：實(shí)際寬度 = width + padding + border
怪異模式下：實(shí)際寬度 = width - padding - border
18、如何解決IE下的3像素BUG?
參閱：
19、如何做1像素細(xì)邊框的table?
方法1：設(shè)置table的border-collapse:collapse;
方法2：關(guān)鍵在于設(shè)置cellspacine="1"，用間隙來作為邊框
20、以圖換字的幾種方法及優(yōu)劣分析
以圖換字，其實(shí)是為了保證頁面的可讀性，這樣既有利于搜索引擎，又有利于結(jié)構(gòu)查看。由于這種方式被大多數(shù)人所認(rèn)同，所以方法也越來越多：
方法1：使用text-indent的負(fù)值，將內(nèi)容移出容器；
方法2：使用display:none，將內(nèi)容隱藏；
方法3：使用padding將文字?jǐn)D出容器之外，并將超出的部分hidden;
方法4：使用font設(shè)置超小字體，達(dá)到隱藏內(nèi)容的目的。
方法1（非常不推薦）看起來蠻簡單，但其實(shí)有幾個(gè)不理想的地方，1是比較吃資源；2是在ie5下面會(huì)出現(xiàn)滯后背景無法顯示；3是內(nèi)容為超鏈接時(shí)，長長的黑色虛框，讓你抓狂。
方法2（不推薦）其實(shí)倒也不復(fù)雜，只是需要多添加一個(gè)標(biāo)簽，比較浪費(fèi)；且display:none出現(xiàn)的幾率太多，對seo也是會(huì)有些許影響的。
方法3（推薦）StandardModel下要2層標(biāo)簽才能搞定，不過相對方法1和2還是有優(yōu)勢的，推薦一下。
方法4（強(qiáng)烈推薦）只需要將字體設(shè)置為0，然后overflow:hidden;如font:0/0arial;overflow:hidden;就同樣可以達(dá)到隱藏內(nèi)容的目的，暫時(shí)還沒發(fā)現(xiàn)有什么副作用，強(qiáng)烈推薦。
21、如何容器透明，內(nèi)容不透明？
假設(shè)在標(biāo)準(zhǔn)模式下有如下結(jié)構(gòu)：
我不要透明
IE only的方法：在父容器outer被設(shè)置為透明后，只需要將子容器inner設(shè)置為position:relative;如果需要兼容其它瀏覽器，則以上的方法不適用，且結(jié)構(gòu)也需改為：
我不要透明
然后使用position + z-index搞定位置
22、如何去掉鏈接的虛線框？
IE下：
FF下:a
23、如何使得頁面字體行距始終保持n倍字體大小為基調(diào)？
在body內(nèi)設(shè)置line-height:n即可，注，不可以為它加上單位
原因可參閱：
24、如何使用標(biāo)準(zhǔn)的方法插入flash?
25、Standard Model如何讓容器可以height:100%？
設(shè)置html,body
26、如何使得表格的寬度固定?
設(shè)置table為table-layout:fixed;這時(shí)表格將使用固定布局算法，多出的內(nèi)容將不影響表格的寬度
27、如何讓min-height兼容ie6?
.min-height
我是兼容的min-height
28、如何讓鼠標(biāo)變成手型且兼容所有現(xiàn)代瀏覽器？
cursor:pointer
29、如何實(shí)現(xiàn)ie6下的position:fixed?
參閱：
30、IE下如何對Standard Mode與Quirks Mode進(jìn)行切換？
IE6以下的瀏覽器不用觸發(fā)，直接以Quirks Mode呈現(xiàn)頁面。
IE6和IE7都可以觸發(fā)的（在XHTML 的DTD申明前加上HTML注釋）：
"">
IE6的觸發(fā)（在XHTML 的DTD申明前加上XML申明）：
"">
當(dāng)沒有使用DTD聲明或者使用HTML4以下（不包括HTML4）的DTD聲明時(shí)，基本所有的瀏覽器都是使用QuirksMode呈現(xiàn)。
31、如何給一個(gè)元素定義多個(gè)不同的css規(guī)則？
多個(gè)規(guī)則之間使用空格分開，并且只有class能同時(shí)使用多個(gè)規(guī)則，id不可以
32、如何區(qū)別display:none與visibility:hidden?
相同的是display:none與visibility:hidden都可以用來隱藏某個(gè)元素；
不同的是display:none在隱藏元素的時(shí)候，將其占位空間也去掉；而visibility:hidden只是隱藏了內(nèi)容而已，其占位空間仍然保留
32.超鏈接訪問過后hover樣式就不出現(xiàn)的問題
被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了,很多人應(yīng)該都遇到過這個(gè)問題，解決方法是改變CSS屬性的排列順序:L-V-H-A
33.FF下如何使連續(xù)長字段自動(dòng)換行
眾所周知IE中直接使用word-wrap:break-word 就可以了, 這里FF中我們使用JS插入的方法來解決
34.ff下為什么父容器的高度不能自適應(yīng)
為什么這個(gè)P撐不開DIV呢？解決的辦法是在div 與 p 之間插入清除掉這個(gè)p的浮動(dòng).
什么？你在IE下也碰到過類似問題
35. IE6的雙倍邊距BUG
浮動(dòng)后本來外邊距10px,但I(xiàn)E解釋為20px,解決辦法是加上display:inline
36. IE6下絕對定位的容器內(nèi)文本無法正常選擇的問題
上面的問題在IE6、7中存在，解決問題的辦法是讓IE進(jìn)入到quirks mode。關(guān)于quirksmode的相關(guān)知識，請參考：
aoao:在IE6版本是6.0.2900.2180.xpsp_sp2.gdr.070227-2254好像依然存在問題，加了背景色依然無效。接著測試中…
37. IE6下為什么圖片下方有空隙產(chǎn)生
解決這個(gè)BUG的方法也有很多，可以是改變html的排版，或者定義img 為display:block
或者定義vertical-align屬性值為vertical-align:top | bottom |middle|text-bottom
還可以設(shè)置父容器的字體大小為零，font-size:0
38. IE6下這兩個(gè)層中間怎么有間隙
這個(gè)IE的3PX BUG也是經(jīng)常出現(xiàn)的，解決的辦法是給.right也同樣浮動(dòng) float:left 或者相對IE6定義.leftmargin-right:-3px;
39. list-style-image無法準(zhǔn)確定位的問題
這個(gè)list-style-image的定位問題也是經(jīng)常有人問的，解決的辦法一般是用li的背景模擬，這里采用相對定位的方法也可以解決
40. LI中內(nèi)容超過長度后以省略號顯示的方法
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
