說起用表格佈局網頁，我總覺得，古老的技術，還是在哪個地方挖個坑埋掉比較好。但貌似不能，因爲近來些天，我乾的竟然就是這些活。
我學過的東西不少，Photoshop是一例，但卻沒學過圖片的切片，所以剛開始切時，簡直不知所謂，只是大概知道，切片完再保存爲圖片與html時，生成的html文件是用表格佈局的。接着發現，如若方方正正地切倒還好，若是橫七豎八地切，則滿文件的colspan與rowspan，本地瀏覽器查看，情況尚佳，上傳後再看，則真是花樣百出了。最明顯的一點，是單元格裏圖片下出現的空白。
我當然想用CSS這種與時俱進的技術，可淘寶的後臺，是有限制的，某些規則是直接過濾掉，不讓用，於是哪怕你在本地調試好了十來個瀏覽器，上傳後也會讓你哭笑不得。
1.本頁使用的HTML聲明爲<!DOCTYPE html>.本文所講爲切片後生成的html文件。
<table style=”border: 1px solid green;” cellspacing=”0″ cellpadding=”0″> <tbody> <tr> <td><img style=”border: 1px solid red;” src=”http://www.zfanw.com/blog/wp-content/uploads/2011/05/head-back.png” alt=”三點一式” /></td> </tr> </tbody> </table>
 |
如上圖所見，上述的代碼，在單元格底部，會出現一條空白。
原因在於，<img>是inline級別的元素，inline元素會在底部預留空間，爲jpg這樣的字符準備。見下圖：
| jpg |
使用firebug查看行的高度爲80px，兩個都是。
解決這個問題，有兩個辦法：
一、img{display:block;}
|
在將img元素聲明爲block級別後，img就無需爲jpg這樣的字符預留底部空間，於是單元格里圖片下面的空白就消失了。
二、img{vertical-align:bottom;}
|
默認情況下，j等字符在垂直方向上是居中對齊的，即vertical-align值爲center，這樣纔會出現底下的空白預留，一旦把vertical-align值聲明爲bottom，預留的空白也就消失了。
三、切片，末行的空白條
但是，還有一個問題，就是切片時圖片切得很多並且沒什麼規則，則生成的html裏，最後一行會補充許多“分隔符.gif“這樣的圖片。如下格式：
<tr> <td> <img src=”xxx.gif” alt=”" height=”1″ width=”120″></td> <td> <img src=”xxx.gif” alt=”" height=”1″ width=”117″></td> <td> <img src=”xxx.gif” alt=”" height=”1″ width=”56″></td> <td> </tr>
最重要的是，這個所謂高只有1像素的gif圖片，會佔據超過它本身高度許多的單元格。也就是上面的tr行的高度不會是1，而會是line-height的值的高度(按文末鏈接裏的說法應該是font-size屬性決定的高度，但據我的測試應該是line-height值決定，因爲一旦line-height值確定了，font-size值設得再大也沒有影響)。
於是，我能做的只是，把該tr的line-height值設爲於img同高，即爲1，前提同樣是img的vertical屬性聲明爲bottom。
其他具體可見mozilla上的關於神祕空白的文章。