《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，
或者设置对齐基线垂直居中。