在使用dreamweaver或者frontpage來制作HTML網(wǎng)頁時,我們有可能會遇到這樣的問題:在軟件中好好的網(wǎng)頁一旦放到瀏覽器中,就會在網(wǎng)頁的下方莫名其妙的多出來或多或少的空白。那么這種空白又要怎么去消除呢?
起先我以為只要在網(wǎng)頁的代碼中加一個CSS來約束一下網(wǎng)頁的高度就行了,事實證明這樣是行不通的。
原因:
首先我們要知道,用軟件來寫網(wǎng)頁的話,大多數(shù)都是通過圖形化的界面來“堆”網(wǎng)頁,這樣堆網(wǎng)頁的話,在創(chuàng)建層或者表格的時候,軟件給層或者表格定義的高度往往會超出我們所想要的高度,但是在軟件上是看不出來的;然而,當我們在瀏覽器中打開網(wǎng)頁的時候,我們就會發(fā)現(xiàn),軟件中不存在的空白就會在瀏覽器中顯示出來。
而不能僅僅通過添加一個html{height:XXpx;}來約束網(wǎng)頁的高度,是因為在網(wǎng)頁中,嵌套在元素內(nèi)部的其他元素的特性會具有更高的優(yōu)先級。例如:你如果在同一個網(wǎng)頁中有如下代碼:body{font-size:10px;}p{font-size:9px;}那么該網(wǎng)頁<p>元素中字體大小就應該是9px而不是10px了。由于這個規(guī)則的存在,網(wǎng)頁中層的總高度大于html{height:XXpx;}中XX的值時,html{height:XXpx;}也就自然沒有作用了。
解決方式:
像這種用軟件寫的網(wǎng)頁代碼,通過去尋找CSS中關于層或者表格高度的定義,然后修改高度的值,就能去掉網(wǎng)頁中不必要的空白了。
更多信息請查看IT技術專欄