table表格中在td中放img，td高度变了

[一眼风雨]

<table class="cube_table" style="width: 526px; visibility: visible;" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td colspan="2" rowspan="2" style=" width: 50%">
<a href="javascript:void(0);">
<img src="./3.jpg" width="100%">
</a>
</td>
<td colspan="2" rowspan="4" style=" width: 50%">
<a href="javascript:void(0);">
<img src="./2.jpg" width="100%">
</a>
</td>
</tr>
<tr>
</tr>
<tr>
<td class="cube_not_empty cols-2 rows-2" colspan="2" rowspan="2" style="height: 50%; width: 50%">
<a href="javascript:void(0);">
<img src="./8.jpg" width="100%">
</a>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>

如上代码：

我想要在表格中完成图片拼接，如果表格里不放图片，加上边框显示效果是这样的：




但是只要第一个图片位置放入图片后，在火狐浏览器中就变成这种效果。
不仅第一个表格中高度撑开了，整个表格高度都变了。



谷歌中显示是没有问题的，

求教怎么解决这种问题？

[anlu0830]

给图片设置宽高试试

[大狗狗]

td的高度是无法固定的，不管你用任何CSS。解决办法只有两个：
1 让图片高度不要超过td高度。
2 在td内嵌套div

[horizon_zpy]

<table class="cube_table" style="width: 526px; visibility: visible;" cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td colspan="2" rowspan="2" style=" width: 50%">
<a href="javascript:void(0);">
<img src="./3.jpg" width="100%">
</a>
</td>
<td colspan="2" rowspan="4" style=" width: 50%;background:url(./2.jpg);background-size:cover;background-repeat:no-repeat;">
<a href="javascript:void(0);">
<!-- <img src="./2.jpg" width="100%" height="100%">-->
</a>
</td>
</tr>
<tr>
</tr>
<tr>
<td class="cube_not_empty cols-2 rows-2" colspan="2" rowspan="2" style="height: 100%; width: 50%">
<a href="javascript:void(0);" >
<img src="./8.jpg" width="100%" >

</a>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
css3 cover

[一个努力小白]

td的高度是无法固定的，不管你用任何CSS。解决办法只有两个：
1 让图片高度不要超过td高度。
2 在td内嵌套div

[yaotomo]

td高度不会小于图片高度 要固定td高度值的话，只能将图片做成自适应td的高度

[Dogfish]

先固定table的高度，然后图像100%

[qq_34896400]

<style> tr,td {padding:0;margin:0;border: 0;border-collapse: collapse;} </style> 加入这个样式看看

[lindahan0728]

设置图片的宽高试试

[方_糖]

把noraml.js加载进去试试

[G-shitou]

设置图片高度试一试