Firefox嵌套CSS中div標簽居中問題解決方法
本文和大家重點討論一下Firefox嵌套CSS中div標簽的居中問題的解決方法，主要包括使用line-height垂直居中，清除容器浮動，不讓鏈接折行，始終讓Firefox顯示滾動條等內容。
Firefox嵌套CSS中div標簽的居中問題的解決方法
假定有如下情況：
viewplaincopytoclipboardprint?
- <dividdivid="a">
- <dividdivid="b">div>
- div>
- <dividdivid="a">
- <dividdivid="b">div>
- div>
如果要實現b在a中居中放置，一般只需用CSS設置a的text-align屬性為center。這樣的方法在IE里看起來一切正常；但是在Firefox中b卻會是居左的。解決辦法就是設置b的橫向margin為auto。例如設置b的CSS樣式為：margin:0auto;。
最好的解決方案往往是最簡單的，這里列出8個CSS技巧，非常簡單，簡單到只需要寫一行代碼，只需要定義一個屬性參數。非常適合學習CSS的新手朋友閱讀。
◆使用line-height垂直居中
- line-height:24px;
使用固定寬度的容器并且需要一行垂直居中時，使用line-height即可（高度與父層容器一致）。
◆清除容器浮動
viewplaincopytoclipboardprint?
- #main{
- overflow:hidden;
- }
- #main{
- overflow:hidden;
- }
◆不讓鏈接折行
viewplaincopytoclipboardprint?
- a{
- whitewhite-space:nowrap;
- }
- a{
- white-space:nowrap;
- }
上面的設定就能避免鏈接折行，不過個人建議長鏈接會有相應的這行（有關換行方面的討論，參看圓心的記錄）。
◆始終讓Firefox顯示滾動條
viewplaincopytoclipboardprint?
- html{
- overflow:-moz-scrollbars-vertical;
- }
- html{
- overflow:-moz-scrollbars-vertical;
- }
也可以使用
viewplaincopytoclipboardprint?
- body,html{
- min-height:101%;
- }
- body,html{
- min-height:101%;
- }
◆使塊元素水平居中
margin:0auto;
其實就是
viewplaincopytoclipboardprint?
- margin-left:auto;
- margin-right:auto;
- margin-left:auto;
- margin-right:auto;
這個技巧基本上所有的CSS教科書都會有說明，別忘記給它加上個寬度。Exploer下也可以使用
viewplaincopytoclipboardprint?
- body{
- text-align:center;
- }
- body{
- text-align:center;
- }
然后定義內層容器
text-align:left;#p#
◆隱藏Exploertextarea的滾動條
viewplaincopytoclipboardprint?
- textarea{
- overflow:auto;
- }
- textarea{
- overflow:auto;
- }
Exploer默認情況下textarea會有垂直滾動條。
◆設置打印分頁
viewplaincopytoclipboardprint?
- h2{
- page-break-before:always;
- }
- h2{
- page-break-before:always;
- }
page-break-before屬性能設置打印網頁時的分頁。
◆刪除鏈接上的虛線框
viewplaincopytoclipboardprint?
- a:active,a:focus{
- outline:none;
- }
- a:active,a:focus{
- outline:none;
- }
Firefox默認會在鏈接獲得焦點（或者點擊時）加上條虛線框，使用上面的屬性可以刪除。
◆最簡單的CSS重置
viewplaincopytoclipboardprint?
- *{
- margin:0;padding:0
- }
- *{
- margin:0;padding:0
- }
CSS對瀏覽器的兼容性有時讓人很頭疼，或許當你了解當中的技巧跟原理，就會覺得也不是難事，從網上收集了IE7,6與Fireofx的兼容性處理方法并整理了一下。對于web2.0的過度，請盡量用xhtml格式寫代碼，而且DOCTYPE影響CSS處理，作為W3C的標準，一定要加DOCTYPE聲明。
【編輯推薦】
