本篇內(nèi)容主要講解“DIV CSS設(shè)計中常見的問題和解決方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“DIV CSS設(shè)計中常見的問題和解決方法”吧!

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、南譙網(wǎng)站維護、網(wǎng)站推廣。

DIV CSS設(shè)計中常見問題的解決辦法

作為前端開發(fā)人員，在日常的頁面制作時，不可避免的會碰上這樣那樣的問題，我挑選了其中的一些進行總結(jié)歸檔，希望對大家會有所幫助：

1、如何定義高度很小的容器？

在IE6下無法定義小高度的容器，是因為有一個默認的行高。
列舉2種解決方案：overflow:hidden|line-height:0

2、圖片下方出現(xiàn)幾像素的空白間隙？

這個也有多種解決方案，如將img定義為display:block,或定義父容器為font-size:0，個人更推薦使用vertical-align的方式，它的值可以是text-top|text-bottom|middle等

3、IE6雙倍margin的BUG?

display:inline

4、文本垂直方向?qū)R文本輸入框？

設(shè)置input為vertical-align:middle，textarea也是如此

5、為什么在web標準下ie無法設(shè)置滾動條的顏色？

將設(shè)置滾動條顏色的樣式定義到html標簽選擇符上即可

6、DIV CSS設(shè)計中如何讓層在falsh上顯示？

不可以，除了少數(shù)幾個級別很高的家伙除外。
但可以將flash設(shè)置為透明，這時層就會透過falsh顯示，近似于覆蓋在flash之上了，如：

7、如何使得文字不換行？

定義包含文字的容器為：width:xxx;white-space:nowrap;

8、ie中如何讓超出寬度的文字顯示為省略號？

定義容器為：overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;

9、DIV CSS設(shè)計中如何在點文字時也選中checkbox?

測試

10、一個div為margin-bottom:10px，一個div為margin-top:5px，為什么2個div之間的間距是10px而不是15px?

這種情況瀏覽器會自動進行margin重疊，只顯示較大的margin值
解決方案：只設(shè)置其中一個div的margin為15px 。             

11、DIV CSS設(shè)計中如何解決ie下當(dāng)li中出現(xiàn)2個或以上的浮動時，li之間產(chǎn)生的空白間隙？

設(shè)置li的vertical-align，值可以為top|text-top|middle|bottom|text-bottom

12、如何使得英文單詞不發(fā)生詞內(nèi)斷行？

word-wrap:break-word;

13、為什么被訪問過的鏈接顏色沒有變化？

定義鏈接的樣式時，需要按照:link,:visited,:hover,:active這樣的順序，可以使用LoVeHAte（喜歡討厭）來記憶

14、單行文本如何垂直居中？

height:xxx;line-height:xxx;高和行高相同即可

15、已知高度的容器如何在頁面中水平垂直居中？

參閱：http://blog.doyoe.com/article.asp?id=74

16、未知尺寸的圖片圖如何水平垂直居中？

參閱：http://blog.doyoe.com/article.asp?id=159

17、標準模式和怪異模式下的盒模型區(qū)別？

標準模式下：實際寬度=width+padding+border
怪異模式下：實際寬度=width-padding-border。

18、如何解決IE下的3像素BUG?

參閱：http://blog.doyoe.com/article.asp?id=68

19、DIV CSS設(shè)計中如何做1像素細邊框的table?

方法1：設(shè)置table的border-collapse:collapse;

 table{border-collapse:collapse;border-color:#000;}  td{border-color:#000;}     測試 測試  

方法2：關(guān)鍵在于設(shè)置cellspacine="1"，用間隙來作為邊框

 table{background:#000;}  tr{background:#fff;}     測試 測試  

20、以圖換字的幾種方法及優(yōu)劣分析

以圖換字，其實是為了保證頁面的可讀性，這樣既有利于搜索引擎，又有利于結(jié)構(gòu)查看。由于這種方式被大多數(shù)人所認同，所以方法也越來越多：

方法1：使用text-indent的負值，將內(nèi)容移出容器；
方法2：使用display:none，將內(nèi)容隱藏；
方法3：使用padding將文字擠出容器之外，并將超出的部分hidden;
方法4：使用font設(shè)置超小字體，達到隱藏內(nèi)容的目的。

方法1（非常不推薦）看起來蠻簡單，但其實有幾個不理想的地方，1是比較吃資源；2是在ie5下面會出現(xiàn)滯后背景無法顯示；3是內(nèi)容為超鏈接時，長長的黑色虛框，讓你抓狂。
方法2（不推薦）其實倒也不復(fù)雜，只是需要多添加一個標簽，比較浪費；且display:none出現(xiàn)的幾率太多，對seo也是會有些許影響的。
方法3（推薦）StandardModel下要2層標簽才能搞定，不過相對方法1和2還是有優(yōu)勢的，推薦一下。
方法4（強烈推薦）只需要將字體和行高設(shè)置為0，然后overflow:hidden就行;不過這樣在Safari和Chrome下還是會有1px高的字出現(xiàn)，所以應(yīng)該再設(shè)置一下字體的顏色和背景圖相同或相近。以此就同樣可以達到隱藏內(nèi)容的目的，暫時還沒發(fā)現(xiàn)有什么副作用，強烈推薦。

21、DIV CSS設(shè)計中如何容器透明，內(nèi)容不透明？

假設(shè)在標準模式下有如下結(jié)構(gòu)：

 我不要透明