达维营-前端网
今天在设计中突然遇到一个TABLE下出现空白区域，导致实际高度比定义高度要高出。于是在网上查了很多，始终没有找到解决方案，只要自己检查原因。
BUG描述：此bug出现在设计的导航条上，为两个表格嵌入，有插入图片。Table下面出现空白区域。
开始以为是浏览器的TABLE的默认属性border-spacing:2px惹的祸或者table的其它属性导致的，经过一系列的排查，才发现是初始样式表中没有如下样式表导致的。
解决方法：添加如下样式表
img{vertical-align: middle;}
(图为BUG网站源图，自己未截图示例图，详细的见实例)
如上图，此图为导航，代码如下：
导航条，最外层表格高度为正常定义的高度73px，但内嵌表格却出现定义高度为73px，实际高度为76px；
BUG页面代码如下：演示网址一
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.zw_class1 {
background-image: url(Menu_L_01.jpg);
background-size: 100% 73px;
background-repeat: no-repeat;
cursor: pointer;
margin: 0;
padding: 0;
}
table {
border: 0;
border-spacing: 0;
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" align="center" style="background-color: #fe0000"
height="73px">
<tr>
<td width="29px"><img src="Menu_L.jpg" height="73px"></td>
<td> <table width="100%" background="menu_bg.jpg" cellspacing="0" cellpadding="0"
style="background-repeat: no-repeat;background-size: auto 73px;border-spacing:0 0;height=73px;"
border="0">
<tr>
<td width="2"><img src="menu_line.jpg"></td>
<td width="103px" class="zw_class1" id="zw_tab1"
onclick="location='/'"></td>
<td width="2"><img src="menu_line.jpg"></td>
</tr>
</table>
</td>
<td width="10px"><img src="Menu_R.jpg" height="73px"></td>
</tr>
</table>
</body>
</html>
修复方法：添加如下样式表
img{vertical-align: middle;}