DIV CSS設計中常見問題及解決辦法
這里和大家分享一下DIV+CSS設計中常見問題的解決辦法，比如在web標準下IE無法設置滾動條的顏色問題，只需將設置滾動條顏色的樣式定義到html標簽選擇符上即可，相信本文的介紹能讓你有所收獲。
DIV+CSS設計中常見問題的解決辦法
作為前端開發人員，在日常的頁面制作時，不可避免的會碰上這樣那樣的問題，這里挑選了其中的一些進行總結歸檔，希望對大家會有所幫助：
1、如何定義高度很小的容器？
在IE6下無法定義小高度的容器，是因為有一個默認的行高。
列舉2種解決方案：overflow:hidden|line-height:0
2、圖片下方出現幾像素的空白間隙？
這個也有多種解決方案，如將img定義為display:block,或定義父容器為font-size:0，個人更推薦使用vertical-align的方式，它的值可以是text-top|text-bottom|middle等
3、IE6雙倍margin的BUG?
display:inline
4、文本垂直方向對齊文本輸入框？
設置input為vertical-align:middle，textarea也是如此。
5、為什么在web標準下IE無法設置滾動條的顏色？
將設置滾動條顏色的樣式定義到html標簽選擇符上即可
6、如何讓層在falsh上顯示？
不可以，除了少數幾個級別很高的家伙除外。
但可以將flash設置為透明，這時層就會透過falsh顯示，近似于覆蓋在flash之上了，如：
<paramname="mode"value="transparent"/>
7、如何使得文字不換行？
定義包含文字的容器為：width:xxx;white-space:nowrap;
8、IE中如何讓超出寬度的文字顯示為省略號？
定義容器為：overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;
9、如何在點文字時也選中checkbox?
- <inputidinputid="test"type="checkbox"value="on"/>
- <labelforlabelfor="test">測試</label>
10、一個div為margin-bottom:10px，一個div為margin-top:5px，為什么2個div之間的間距是10px而不是15px?
這種情況瀏覽器會自動進行margin重疊，只顯示較大的margin值
解決方案：只設置其中一個div的margin為15px
11、如何解決IE下當li中出現2個或以上的浮動時，li之間產生的空白間隙？
設置li的vertical-align，值可以為top|text-top|middle|bottom|text-bottom
12、如何使得英文單詞不發生詞內斷行？
word-wrap:break-word;
13、為什么被訪問過的鏈接顏色沒有變化？
定義鏈接的樣式時，需要按照:link,:visited,:hover,:active這樣的順序，可以使用LoVeHAte（喜歡討厭）來記憶#p#
14、單行文本如何垂直居中？
height:xxx;line-height:xxx;高和行高相同即可
15、已知高度的容器如何在頁面中水平垂直居中？
參閱：http://blog.doyoe.com/article.asp?id=74p>
16、未知尺寸的圖片圖如何水平垂直居中？
參閱：http://blog.doyoe.com/article.asp?id=159
17、標準模式和怪異模式下的盒模型區別？
標準模式下：實際寬度=width+padding+border
怪異模式下：實際寬度=width-padding-border
18、如何解決IE下的3像素BUG?
參閱：http://blog.doyoe.com/article.asp?id=68
19、如何做1像素細邊框的table?
方法1：設置table的border-collapse:collapse;
- <styletypestyletype="text/css">
- table{border-collapse:collapse;border-color:#000;}
- td{border-color:#000;}
- </style>
- <tablecellspacingtablecellspacing="0"cellpadding="0"border="1">
- <tr>
- <td>測試</td>
- <td>測試</td>
- </tr>
- </table>
方法2：關鍵在于設置cellspacine="1"，用間隙來作為邊框
- <styletypestyletype="text/css">
- table{background:#000;}
- tr{background:#fff;}
- </style>
- <tablecellspacingtablecellspacing="1"cellpadding="0"border="0">
- <tr>
- <td>測試</td>
- <td>測試</td>
- </tr>
- </table>
20、以圖換字的幾種方法及優劣分析
以圖換字，其實是為了保證頁面的可讀性，這樣既有利于搜索引擎，又有利于結構查看。由于這種方式被大多數人所認同，所以方法也越來越多：
方法1：使用text-indent的負值，將內容移出容器；
方法2：使用display:none，將內容隱藏；
方法3：使用padding將文字擠出容器之外，并將超出的部分hidden;
方法4：使用font設置超小字體，達到隱藏內容的目的。
方法1（非常不推薦）看起來蠻簡單，但其實有幾個不理想的地方，1是比較吃資源；2是在IE5下面會出現滯后背景無法顯示；3是內容為超鏈接時，長長的黑色虛框，讓你抓狂。
方法2（不推薦）其實倒也不復雜，只是需要多添加一個標簽，比較浪費；且display:none出現的幾率太多，對seo也是會有些許影響的。
方法3（推薦）StandardModel下要2層標簽才能搞定，不過相對方法1和2還是有優勢的，推薦一下。
方法4（強烈推薦）只需要將字體和行高設置為0，然后overflow:hidden就行;不過這樣在Safari和Chrome下還是會有1px高的字出現，所以應該再設置一下字體的顏色和背景圖相同或相近。以此就同樣可以達到隱藏內容的目的，暫時還沒發現有什么副作用，強烈推薦。
21、如何容器透明，內容不透明？
假設在標準模式下有如下結構：
- <divclassdivclass="outer">
- <pclasspclass="inner">我不要透明</p>
- </div>
IEonly的方法：在父容器outer被設置為透明后，只需要將子容器inner設置為position:relative;如果需要兼容其它瀏覽器，則以上的方法不適用，且結構也需改為：
- <divclassdivclass="outer"></div>
- <divclassdivclass="inner">我不要透明</div>
然后使用position+z-index搞定位置#p#
22、如何去掉鏈接的虛線框？
IE下：<ahref="#"onfocus="this.blur();"...>
FF下:a{outline:none;}
23、如何使得頁面字體行距始終保持n倍字體大小為基調？
在body內設置line-height:n即可，注，不可以為它加上單位
原因可參閱：http://blog.doyoe.com/article.asp?id=195
24、如何使用標準的方法插入flash?
- <divclassdivclass="fla-show">
- <objecttypeobjecttype="application/x-shockwave-flash"data="*.swf"width="*"height="*">
- <paramnameparamname="movIE"value="*.swf"/>
- <imgsrcimgsrc="*.jpg"alt="用于不支持flash或屏蔽flash時顯示"/>
- </object>
- </div>
25、StandardModel如何讓容器可以height:100%？
設置html,body{height:100%;margin:0;}
26、如何使得表格的寬度固定?
設置table為table-layout:fixed;這時表格將使用固定布局算法，多出的內容將不影響表格的寬度
27、如何讓min-height兼容IE6?
- .min-height{min-height:100px;_height:100px;}
- <divclassdivclass="min-height">我是兼容的min-height</div>
28、如何讓鼠標變成手型且兼容所有現代瀏覽器？
cursor:pointer
29、如何實現IE6下的position:fixed?
參閱：http://blog.doyoe.com/article.asp?id=188
30、IE下如何對StandardMode與QuirksMode進行切換？
IE6以下的瀏覽器不用觸發，直接以QuirksMode呈現頁面。
IE6和IE7都可以觸發的（在XHTML的DTD申明前加上HTML注釋）：
- <!--LetIE6andIE7intoquirksmode-->
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
IE6的觸發（在XHTML的DTD申明前加上XML申明）：
- <?xmlversionxmlversion="1.0"encoding="utf-8"?>
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
當沒有使用DTD聲明或者使用HTML4以下（不包括HTML4）的DTD聲明時，基本所有的瀏覽器都是使用QuirksMode呈現。
31、如何給一個元素定義多個不同的css規則？
- <styletypestyletype="text/css">
- .a{color:#f00;}
- .b{background:#eee;}
- </style>
- <divclassdivclass="ab">測試</div>
如上例，該元素同時擁有a和b定義的樣式規則。
多個規則之間使用空格分開，并且只有class能同時使用多個規則，id不可以
32、如何區別display:none與visibility:hidden?
相同的是display:none與visibility:hidden都可以用來隱藏某個元素；
不同的是display:none在隱藏元素的時候，將其占位空間也去掉；而visibility:hidden只是隱藏了內容而已，其占位空間仍然保留。
33、如何解決按鈕在IE7及以下瀏覽器中隨著value增多兩邊留白也隨著增加的問題？
通常情況下，如果value的長度是固定不變的，可以給按鈕設定一個固定的width，這是沒有問題的，但在大多數情況下，按鈕的value大多是可變的，所以給按鈕設定width是不夠理想的。
解決方法，給按鈕加上：#overflow:visible;padding:010px;其中overflow用于清除IE兩邊的留白，padding用于使得各瀏覽器的留白一致。
【編輯推薦】
- 解讀CSS中absolute與relative的區別和聯系
- CSS樣式表特點及嵌入網頁的四種途徑
- 三種方法實現CSS樣式表插入
- CSS外邊距設置屬性margin用法
- 探究CSS高級語法中選擇器分組和CSS繼承用法
