HTML页面布局:td里包含一个img,总会出现一条空隙?

《Head First-Ajax》第六章是一个关于的原生DOM的练习,人家示例布局出来是这个样子的:

 

 

HTML页面布局:td里包含一个img,总会出现一条空隙?_第1张图片

 

我的布局出来是这样的:

HTML页面布局:td里包含一个img,总会出现一条空隙?_第2张图片

 

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,

或者设置对齐基线垂直居中。

你可能感兴趣的:(HTML页面布局:td里包含一个img,总会出现一条空隙?)