這篇文章主要講解了“DIV+CSS頁(yè)面布局的常見(jiàn)問(wèn)題及解決方案”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“DIV+CSS頁(yè)面布局的常見(jiàn)問(wèn)題及解決方案”吧！

在馬尾等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站建設(shè)、網(wǎng)站制作 網(wǎng)站設(shè)計(jì)制作按需定制開(kāi)發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),高端網(wǎng)站設(shè)計(jì),營(yíng)銷(xiāo)型網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站建設(shè)公司,馬尾網(wǎng)站建設(shè)費(fèi)用合理。

DIV+CSS常見(jiàn)問(wèn)題及解決方案

1.超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)的問(wèn)題？

被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不在具有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>

浮動(dòng)后本來(lái)外邊距10px，但I(xiàn)E解釋為20px，解決辦法是加上display:inline

3.DIV+CSS中為什么FF下文本無(wú)法撐開(kāi)容器的高度？

標(biāo)準(zhǔn)瀏覽器中固定高度值的容器是不會(huì)象IE6里那樣被撐開(kāi)的，那我又想固定高度，又想能被撐開(kāi)需要怎樣設(shè)置呢？辦法就是去掉height設(shè)置min-height:200px;這里為了照顧不認(rèn)識(shí)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標(biāo)準(zhǔn)中IE無(wú)法設(shè)置滾動(dòng)條顏色了？

原來(lái)樣式設(shè)置：

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.為什么無(wú)法定義1px左右高度的容器？

IE6下這個(gè)問(wèn)題是因?yàn)槟J(rèn)的行高造成的，解決的方法也有很多，例如：overflow:hidden|zoom:0.08|line-height:1px。

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

解決的辦法是給FLASH設(shè)置透明：

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.怎樣使一個(gè)層垂直居中于瀏覽器中？

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>

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

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

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

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;

◆DIV+CSS中隱藏Exploertextarea的滾動(dòng)條

viewplaincopytoclipboardprint?

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

Exploer默認(rèn)情況下textarea會(huì)有垂直滾動(dòng)條。

◆設(shè)置打印分頁(yè)

viewplaincopytoclipboardprint?

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

page-break-before屬性能設(shè)置打印網(wǎng)頁(yè)時(shí)的分頁(yè)。

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

viewplaincopytoclipboardprint?

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

Firefox默認(rèn)會(huì)在鏈接獲得焦點(diǎn)（或者點(diǎn)擊時(shí)）加上條虛線框，使用上面的屬性可以刪除。

◆最簡(jiǎn)單的DIV+CSS重置

viewplaincopytoclipboardprint?

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

感謝各位的閱讀，以上就是“DIV+CSS頁(yè)面布局的常見(jiàn)問(wèn)題及解決方案”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)DIV+CSS頁(yè)面布局的常見(jiàn)問(wèn)題及解決方案這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

分享題目：DIV+CSS頁(yè)面布局的常見(jiàn)問(wèn)題及解決方案
文章URL：http://vcdvsql.cn/article4/iijeie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、移動(dòng)網(wǎng)站建設(shè)、定制網(wǎng)站、小程序開(kāi)發(fā)、企業(yè)建站、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)