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