《Head First-Ajax》第六章是一個關於的原生DOM的練習，人家示例布局出來是這個樣子的：
我的布局出來是這樣的：
HTML布局代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <link rel="stylesheet" type="text/css" href="css/main.css"> 6 <script type="text/javascript" src="js/utils/ClassUtil.js"></script> 7 <script type="text/javascript" src="js/utils/EventUtil.js"></script> 8 <script type="text/javascript" src="js/main.js"></script> 9 10 <!-- <link rel="stylesheet" type="text/css" href="css/reset.css"> --> 11 </head> 12 <body> 13 <div id="puzzle"> 14 <h1 id="logo">Webvilee Puzzles</h1> 15 <div id="puzzleGrid"> 16 <table cellpadding="0" cellspacing="0"> 17 <tbody> 18 <tr> 19 <td id="cell11"><img class="td" src="images/07.png" alt="07" height="69" width="69"></td> 20 <td id="cell12"><img class="td" src="images/06.png" alt="06" height="69" width="69"></td> 21 <td id="cell13"><img class="td" src="images/14.png" alt="14" height="69" width="69"></td> 22 <td id="cell14"><img class="td" src="images/11.png" alt="11" height="69" width="69"></td> 23 </tr> 24 <tr> 25 <td id="cell21"><img class="td" src="images/12.png" alt="12" height="69" width="69"></td> 26 <td id="cell22"><img class="td" src="images/empty.png" alt="empty" height="69" width="69"></td> 27 <td id="cell23"><img class="td" src="images/05.png" alt="05" height="69" width="69"></td> 28 <td id="cell24"><img class="td" src="images/13.png" alt="13" height="69" width="69"></td> 29 </tr> 30 <tr> 31 <td id="cell31"> 32 <img class="td" src="images/08.png" alt="08" height="69" width="69"> 33 </td> 34 <td id="cell32"> 35 <img class="td" src="images/10.png" alt="10" height="69" width="69"> 36 </td> 37 <td id="cell33"> 38 <img class="td" src="images/01.png" alt="01" height="69" width="69"> 39 </td> 40 <td id="cell34"> 41 <img class="td" src="images/15.png" alt="15" height="69" width="69"> 42 </td> 43 </tr> 44 <tr> 45 <td id="cell41"> 46 <img class="td" src="images/04.png" alt="04" height="69" width="69"> 47 </td> 48 <td id="cell42"> 49 <img class="td" src="images/02.png" alt="02" height="69" width="69"> 50 </td> 51 <td id="cell43"> 52 <img class="td" src="images/09.png" alt="09" height="69" width="69"> 53 </td> 54 <td id="cell44"> 55 <img class="td" src="images/03.png" alt="03" height="69" width="69"> 56 </td> 57 </tr> 58 </tbody> 59 </table> 60 </div> 61 </div> 62 </body> 63 </html>
如上圖對比所示：td里包含img，總會出現一條莫名其妙的空隙。
重新照着源碼抄了一遍，發現還是有一條細線。逐條比較，才發現區別在doctype上。
源碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我的（sublime自動生成）：
<!DOCTYPE html>
搜了下，已經有了完美解釋。
原鏈接：http://stackoverflow.com/questions/4904668/html5-vertical-spacing-issue-with-img
中文翻譯：https://www.zhihu.com/question/38437397
首先，瀏覽器並沒有所謂的"HTML 5 模式"，而是只有三種：怪異模式(Quirks)，幾乎標准的模式(Limited Quirks)和標准模式(Standards)，其中幾乎標准的模式和標准模式之間的唯一差異在於是否對<img>元素給定行高(line-height)和基線(baseline)。幾乎標准模式中，如果<img>標簽所在行沒有其他的行內元素，將不指定基線(baseline)，<img>標簽因此會緊貼着父元素底部。
在標准模式中，行框總是會包含類似字母"g"，"f"尾巴下伸出來的那一部分空間(針對下行字母)，即使行框內並沒有任何內容。因此這種情況下你看到的<img>跟父元素底部幾個像素的間隙實際上就是為”字母尾巴“預留的。
使用 XHTML Transitional Doctype會是瀏覽器運行在”幾乎標准模式(Limited Quirks)”。如果你使用XHTML Strict 或者HTML 4 Strict模式，你將看到和使用HTML 5 模式同樣的間隙，因為這是標准模式(Standards mode)。
解決辦法：
設置行高或者字體大小為0，
或者設置對齊基線垂直居中。