DIVCSS設(shè)計(jì)中常見(jiàn)的問(wèn)題和解決方法

本篇內(nèi)容主要講解“DIV CSS設(shè)計(jì)中常見(jiàn)的問(wèn)題和解決方法”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“DIV CSS設(shè)計(jì)中常見(jiàn)的問(wèn)題和解決方法”吧!

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)頁(yè)空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、南譙網(wǎng)站維護(hù)、網(wǎng)站推廣。

DIV CSS設(shè)計(jì)中常見(jiàn)問(wèn)題的解決辦法

作為前端開(kāi)發(fā)人員，在日常的頁(yè)面制作時(shí)，不可避免的會(huì)碰上這樣那樣的問(wèn)題，我挑選了其中的一些進(jìn)行總結(jié)歸檔，希望對(duì)大家會(huì)有所幫助：

1、如何定義高度很小的容器？

在IE6下無(wú)法定義小高度的容器，是因?yàn)橛幸粋€(gè)默認(rèn)的行高。
列舉2種解決方案：overflow:hidden|line-height:0

2、圖片下方出現(xiàn)幾像素的空白間隙？

這個(gè)也有多種解決方案，如將img定義為display:block,或定義父容器為font-size:0，個(gè)人更推薦使用vertical-align的方式，它的值可以是text-top|text-bottom|middle等

3、IE6雙倍margin的BUG?

display:inline

4、文本垂直方向?qū)R文本輸入框？

設(shè)置input為vertical-align:middle，textarea也是如此

5、為什么在web標(biāo)準(zhǔn)下ie無(wú)法設(shè)置滾動(dòng)條的顏色？

將設(shè)置滾動(dòng)條顏色的樣式定義到html標(biāo)簽選擇符上即可

6、DIV CSS設(shè)計(jì)中如何讓層在falsh上顯示？

不可以，除了少數(shù)幾個(gè)級(jí)別很高的家伙除外。
但可以將flash設(shè)置為透明，這時(shí)層就會(huì)透過(guò)falsh顯示，近似于覆蓋在flash之上了，如：

<paramnameparamname="mode"value="transparent"/>

7、如何使得文字不換行？

定義包含文字的容器為：width:xxx;white-space:nowrap;

8、ie中如何讓超出寬度的文字顯示為省略號(hào)？

定義容器為：overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;

9、DIV CSS設(shè)計(jì)中如何在點(diǎn)文字時(shí)也選中checkbox?

<inputidinputid="test"type="checkbox"value="on"/><labelforlabelfor="test">測(cè)試</label>

10、一個(gè)div為margin-bottom:10px，一個(gè)div為margin-top:5px，為什么2個(gè)div之間的間距是10px而不是15px?

這種情況瀏覽器會(huì)自動(dòng)進(jìn)行margin重疊，只顯示較大的margin值
解決方案：只設(shè)置其中一個(gè)div的margin為15px 。             

11、DIV CSS設(shè)計(jì)中如何解決ie下當(dāng)li中出現(xiàn)2個(gè)或以上的浮動(dòng)時(shí)，li之間產(chǎn)生的空白間隙？

設(shè)置li的vertical-align，值可以為top|text-top|middle|bottom|text-bottom

12、如何使得英文單詞不發(fā)生詞內(nèi)斷行？

word-wrap:break-word;

13、為什么被訪問(wèn)過(guò)的鏈接顏色沒(méi)有變化？

定義鏈接的樣式時(shí)，需要按照:link,:visited,:hover,:active這樣的順序，可以使用LoVeHAte（喜歡討厭）來(lái)記憶

14、單行文本如何垂直居中？

height:xxx;line-height:xxx;高和行高相同即可

15、已知高度的容器如何在頁(yè)面中水平垂直居中？

參閱：http://blog.doyoe.com/article.asp?id=74

16、未知尺寸的圖片圖如何水平垂直居中？

參閱：http://blog.doyoe.com/article.asp?id=159

17、標(biāo)準(zhǔn)模式和怪異模式下的盒模型區(qū)別？

標(biāo)準(zhǔn)模式下：實(shí)際寬度=width+padding+border
怪異模式下：實(shí)際寬度=width-padding-border。

18、如何解決IE下的3像素BUG?

參閱：http://blog.doyoe.com/article.asp?id=68

19、DIV CSS設(shè)計(jì)中如何做1像素細(xì)邊框的table?

方法1：設(shè)置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>測(cè)試</td> <td>測(cè)試</td> </tr> </table>

方法2：關(guān)鍵在于設(shè)置cellspacine="1"，用間隙來(lái)作為邊框

<styletypestyletype="text/css"> table{background:#000;}  tr{background:#fff;}  </style> <tablecellspacingtablecellspacing="1"cellpadding="0"border="0"> <tr> <td>測(cè)試</td> <td>測(cè)試</td> </tr> </table>

20、以圖換字的幾種方法及優(yōu)劣分析

以圖換字，其實(shí)是為了保證頁(yè)面的可讀性，這樣既有利于搜索引擎，又有利于結(jié)構(gòu)查看。由于這種方式被大多數(shù)人所認(rèn)同，所以方法也越來(lái)越多：

方法1：使用text-indent的負(fù)值，將內(nèi)容移出容器；
方法2：使用display:none，將內(nèi)容隱藏；
方法3：使用padding將文字?jǐn)D出容器之外，并將超出的部分hidden;
方法4：使用font設(shè)置超小字體，達(dá)到隱藏內(nèi)容的目的。

方法1（非常不推薦）看起來(lái)蠻簡(jiǎn)單，但其實(shí)有幾個(gè)不理想的地方，1是比較吃資源；2是在ie5下面會(huì)出現(xiàn)滯后背景無(wú)法顯示；3是內(nèi)容為超鏈接時(shí)，長(zhǎng)長(zhǎng)的黑色虛框，讓你抓狂。
方法2（不推薦）其實(shí)倒也不復(fù)雜，只是需要多添加一個(gè)標(biāo)簽，比較浪費(fèi)；且display:none出現(xiàn)的幾率太多，對(duì)seo也是會(huì)有些許影響的。
方法3（推薦）StandardModel下要2層標(biāo)簽才能搞定，不過(guò)相對(duì)方法1和2還是有優(yōu)勢(shì)的，推薦一下。
方法4（強(qiáng)烈推薦）只需要將字體和行高設(shè)置為0，然后overflow:hidden就行;不過(guò)這樣在Safari和Chrome下還是會(huì)有1px高的字出現(xiàn)，所以應(yīng)該再設(shè)置一下字體的顏色和背景圖相同或相近。以此就同樣可以達(dá)到隱藏內(nèi)容的目的，暫時(shí)還沒(méi)發(fā)現(xiàn)有什么副作用，強(qiáng)烈推薦。

21、DIV CSS設(shè)計(jì)中如何容器透明，內(nèi)容不透明？

假設(shè)在標(biāo)準(zhǔn)模式下有如下結(jié)構(gòu)：

<divclassdivclass="outer"> <pclasspclass="inner">我不要透明</p> </div>

IEonly的方法：在父容器outer被設(shè)置為透明后，只需要將子容器inner設(shè)置為position:relative;如果需要兼容其它瀏覽器，則以上的方法不適用，且結(jié)構(gòu)也需改為：

<divclassdivclass="outer"></div> <divclassdivclass="inner">我不要透明</div>

然后使用position+z-index搞定位置

22、DIV CSS設(shè)計(jì)中如何去掉鏈接的虛線框？

IE下：<ahref="#"onfocus="this.blur();"...>
FF下:a{outline:none;}

23、如何使得頁(yè)面字體行距始終保持n倍字體大小為基調(diào)？

在body內(nèi)設(shè)置line-height:n即可，注，不可以為它加上單位
原因可參閱：http://blog.doyoe.com/article.asp?id=195

24、如何使用標(biāo)準(zhǔn)的方法插入flash?

<divclassdivclass="fla-show"> <objecttypeobjecttype="application/x-shockwave-flash"data="*.swf"width="*"height="*"> <paramnameparamname="movie"value="*.swf"/> <imgsrcimgsrc="*.jpg"alt="用于不支持flash或屏蔽flash時(shí)顯示"/> </object> </div>

25、StandardModel如何讓容器可以height:100%？

設(shè)置html,body{height:100%;margin:0;}

26、DIV CSS設(shè)計(jì)中如何使得表格的寬度固定?

設(shè)置table為table-layout:fixed;這時(shí)表格將使用固定布局算法，多出的內(nèi)容將不影響表格的寬度

27、如何讓min-height兼容ie6?

.min-height{min-height:100px;_height:100px;}  <divclassdivclass="min-height">我是兼容的min-height</div>

28、DIV CSS設(shè)計(jì)中如何讓鼠標(biāo)變成手型且兼容所有現(xiàn)代瀏覽器？

cursor:pointer

29、如何實(shí)現(xiàn)ie6下的position:fixed?

參閱：http://blog.doyoe.com/article.asp?id=188

30、IE下如何對(duì)StandardMode與QuirksMode進(jìn)行切換？

IE6以下的瀏覽器不用觸發(fā)，直接以QuirksMode呈現(xiàn)頁(yè)面。

IE6和IE7都可以觸發(fā)的（在XHTML的DTD申明前加上HTML注釋?zhuān)?/p>

<!--Letie6andie7intoquirksmode--> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

IE6的觸發(fā)（在XHTML的DTD申明前加上XML申明）：

<?xmlversionxmlversion="1.0"encoding="utf-8"?> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

當(dāng)沒(méi)有使用DTD聲明或者使用HTML4以下（不包括HTML4）的DTD聲明時(shí)，基本所有的瀏覽器都是使用QuirksMode呈現(xiàn)。

31、DIV CSS設(shè)計(jì)中如何給一個(gè)元素定義多個(gè)不同的css規(guī)則？

<styletypestyletype="text/css"> .a{color:#f00;}  .b{background:#eee;}  </style>  <divclassdivclass="ab">測(cè)試</div>

如上例，該元素同時(shí)擁有a和b定義的樣式規(guī)則。
多個(gè)規(guī)則之間使用空格分開(kāi)，并且只有class能同時(shí)使用多個(gè)規(guī)則，id不可以

32、如何區(qū)別display:none與visibility:hidden?

相同的是display:none與visibility:hidden都可以用來(lái)隱藏某個(gè)元素；
不同的是display:none在隱藏元素的時(shí)候，將其占位空間也去掉；而visibility:hidden只是隱藏了內(nèi)容而已，其占位空間仍然保留。

33、DIV CSS設(shè)計(jì)中如何解決按鈕在IE7及以下瀏覽器中隨著value增多兩邊留白也隨著增加的問(wèn)題？

通常情況下，如果value的長(zhǎng)度是固定不變的，可以給按鈕設(shè)定一個(gè)固定的width，這是沒(méi)有問(wèn)題的，但在大多數(shù)情況下，按鈕的value大多是可變的，所以給按鈕設(shè)定width是不夠理想的。
解決方法，給按鈕加上：#overflow:visible;padding:010px;其中overflow用于清除ie兩邊的留白，padding用于使得各瀏覽器的留白一致。

到此，相信大家對(duì)“DIV CSS設(shè)計(jì)中常見(jiàn)的問(wèn)題和解決方法”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！

文章標(biāo)題：DIVCSS設(shè)計(jì)中常見(jiàn)的問(wèn)題和解決方法
URL標(biāo)題：http://bm7419.com/article22/jdecjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、用戶(hù)體驗(yàn)、、軟件開(kāi)發(fā)、標(biāo)簽優(yōu)化、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(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)