DIV+CSS頁面布局的常見問題及解決方案

這篇文章主要講解了“DIV+CSS頁面布局的常見問題及解決方案”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“DIV+CSS頁面布局的常見問題及解決方案”吧！

DIV+CSS常見問題及解決方案

1.超鏈接訪問過后hover樣式就不出現的問題？

被點擊訪問過的超鏈接樣式不在具有hover和active了，解決方法是改變CSS屬性的排列順序：L-V-H-A。

2.IE6的雙倍邊距BUG

例如：

viewplaincopytoclipboardprint?

<styletypestyletype="text/css"> body{margin:0;}  div{float:left;margin-left:10px;width:200px;  height:200px;border:1pxsolidred;}  style> <styletypestyletype="text/css"> body{margin:0;}  div{float:left;margin-left:10px;width:200px;  height:200px;border:1pxsolidred;}  style>

浮動后本來外邊距10px，但IE解釋為20px，解決辦法是加上display:inline

3.DIV+CSS中為什么FF下文本無法撐開容器的高度？

標準瀏覽器中固定高度值的容器是不會象IE6里那樣被撐開的，那我又想固定高度，又想能被撐開需要怎樣設置呢？辦法就是去掉height設置min-height:200px;這里為了照顧不認識min-height的IE6可以這樣定義：

viewplaincopytoclipboardprint?

div{height:auto!important;height:200px;min-height:200px;}  div{height:auto!important;height:200px;min-height:200px;}

4.DIV+CSS中為什么web標準中IE無法設置滾動條顏色了？

原來樣式設置：

viewplaincopytoclipboardprint?

<styletypestyletype="text/css"> body{scrollbar-face-color:#f6f6f6;  scrollbar-highlight-color:#fff;scrollbar-shadow-color:#eeeeee;  scrollbar-3dlight-color:#eeeeee;scrollbar-arrow-color:#000;  scrollbar-track-color:#fff;scrollbar-darkshadow-color:#fff;}  style> <styletypestyletype="text/css"> body{scrollbar-face-color:#f6f6f6;scrollbar-highlight-color:#fff;  scrollbar-shadow-color:#eeeeee;scrollbar-3dlight-color:#eeeeee;  scrollbar-arrow-color:#000;scrollbar-track-color:#fff;  scrollbar-darkshadow-color:#fff;}  style>

解決辦法是將body換成html。

5.為什么無法定義1px左右高度的容器？

IE6下這個問題是因為默認的行高造成的，解決的方法也有很多，例如：overflow:hidden|zoom:0.08|line-height:1px。

6.DIV+CSS中怎么樣才能讓層顯示在FLASH之上呢？

解決的辦法是給FLASH設置透明：

viewplaincopytoclipboardprint?

<ahrefahref="http://www.easyq.net.cn/">:a> <prelangprelang="html"line="1"> <paramnameparamname="wmode"value="transparent"/> <ahrefahref="http://www.easyq.net.cn/">:  <prelangprelang="html"line="1"> <paramnameparamname="wmode"value="transparent"/>

7.怎樣使一個層垂直居中于瀏覽器中？

viewplaincopytoclipboardprint?

<styletypestyletype="text/css"> <!--  div{  position:absolute;  top:50%;  left:50%;  margin:-100px00-100px;  width:200px;  height:200px;  border:1pxsolidred;  }  --> style> <styletypestyletype="text/css"> <!--  div{  position:absolute;  top:50%;  left:50%;  margin:-100px00-100px;  width:200px;  height:200px;  border:1pxsolidred;  }  --> style>

這里使用百分比絕對定位，與外補丁負值的方法，負值的大小為其自身寬度高度除以二。

8.DIV+CSS中Firefox嵌套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個DIV+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%;  }

◆DIV+CSS中使塊元素水平居中

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;

◆DIV+CSS中隱藏Exploertextarea的滾動條

viewplaincopytoclipboardprint?

textarea{  overflow:auto;  }  textarea{  overflow:auto;  }

Exploer默認情況下textarea會有垂直滾動條。

◆設置打印分頁

viewplaincopytoclipboardprint?

h3{  page-break-before:always;  }  h3{  page-break-before:always;  }

page-break-before屬性能設置打印網頁時的分頁。

◆DIV+CSS中刪除鏈接上的虛線框

viewplaincopytoclipboardprint?

a:active,a:focus{  outline:none;  }  a:active,a:focus{  outline:none;  }

Firefox默認會在鏈接獲得焦點（或者點擊時）加上條虛線框，使用上面的屬性可以刪除。

◆最簡單的DIV+CSS重置

viewplaincopytoclipboardprint?

*{  margin:0;padding:0  }  *{  margin:0;padding:0  }

感謝各位的閱讀，以上就是“DIV+CSS頁面布局的常見問題及解決方案”的內容了，經過本文的學習后，相信大家對DIV+CSS頁面布局的常見問題及解決方案這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！