收集XHTML和CSS常見(jiàn)問(wèn)題和解決方案發(fā)布者：本站     時(shí)間：2020-05-23 11:05:44

作為前端開(kāi)發(fā)人員，在日常的頁(yè)面制作時(shí)，不可避免的會(huì )碰上這樣那樣的問(wèn)題，這時(shí)就需要尋找這些XHTML及CSS常見(jiàn)問(wèn)題的解決方案。我根據自己的經(jīng)驗和心得挑選和整理了一些XHTML常見(jiàn)問(wèn)題和CSS常見(jiàn)問(wèn)題的解決方案進(jìn)行總結歸檔，希望對大家會(huì )有所幫助：

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

在IE6下無(wú)法定義小高度的容器，是因為有一個(gè)默認的行高。
列舉2種解決方案：overflow:hidden | line-height:0

2、圖片下方出現幾像素的空白間隙？

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

3、IE6雙倍margin的BUG?

display:inline

4、文本垂直方向對齊文本輸入框？

設置input為vertical-align:middle，textarea也是如此

5、為什么在web標準下ie無(wú)法設置滾動(dòng)條的顏色？

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

6、如何讓層在falsh上顯示？

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

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

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

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

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

9、如何在點(diǎn)文字時(shí)也選中checkbox?

<input id="test" type="checkbox" value="on" /><label for="test">測試</label>

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

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

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

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

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

word-wrap:break-word;

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

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

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

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