Question

简介

我有这部分HTML：

<!DOCTYPE HTML>
[...]
<table class="inv">
  <tr>
    <td id="i_1"></td><td id="i_2"></td><td id="i_3"></td><td id="i_4"></td><td id="i_5"></td>
    <td class="dt" rowspan="5">
      <div style="height:460px;position:relative">
        <div class="st msg"></div>
        <img src="content/images/site/inv.png"><br>
        <a id="nm">USER INVENTORY</a><br>
        <span class="desc">Contain tradable items of the user, click on an item on the left.</span><br>
        <div style="text-align:right;padding-top:15px" class="bts"></div>
      </div>
      <div id="bot" style="display:none"><span class="bt i_b pp">&lt;</span>&nbsp;<span class="bt i_b np">&gt;</span>&nbsp;&nbsp;<span style="font-weight:bold" id="pgs"></span></div>
    </td>
  </tr>
  <tr>
    <td id="i_6"></td><td id="i_7"></td><td id="i_8"></td><td id="i_9"></td><td id="i_10"></td>
  </tr>
  <tr>
    <td id="i_11"></td><td id="i_12"></td><td id="i_13"></td><td id="i_14"></td><td id="i_15"></td>
  </tr>
  <tr>
    <td id="i_16"></td><td id="i_17"></td><td id="i_18"></td><td id="i_19"></td><td id="i_20"></td>
  </tr>
  <tr>
    <td id="i_21"></td><td id="i_22"></td><td id="i_23"></td><td id="i_24"></td><td id="i_25"></td>
  </tr>
</table>
[...]

链接到此CSS：

body{
  font:16px Arial, Tahoma;
  background-color:#222222;
  margin:auto;
  width:100%;
}
table{
  border-collapse:collapse;
  color:#FFF;
  width:100%;
}
table td{
  border:1px solid #FFFFFF;
  vertical-align:top;
  text-align:left;
  padding:0px;
}
.inv{
  table-layout:fixed;
}
.inv td:not(.dt){
  width:100px;
  height:100px;
  text-align:center;
  vertical-align:middle;
}
.inv td:not(.dt) > img{
  max-width:100px;
  max-height:100px;
  cursor:pointer;
}
.inv td:not(.dt) > img:hover{
  position:absolute;
  z-index:100;
  width:110px;
  height:auto;
  margin-top:-55px;
  margin-left:-55px;
  box-shadow:0px 0px 2px 1px #000000;
}
.inv .dt{
  width:35%;
  padding:10px;
}
.inv .dt img{
  width:100%;
  height:auto;
}
.inv .dt #desc{
  font-size:12px;
  color:#B8B6B4;
  max-height:60px;
  overflow:hidden;
  display:inline-block;
}
.bt.i_b{
  color:#FFFFFF;
}
.bt.i_b:hover{
  background-color:#1B1B1B;
}
.det #nm{
  font-size:20px;
  font-weight:bold;
}

表格中的所有TD都填充了以下代码的图像：

for(var i = 0; i < ((inv.length < 25) ? inv.length : 25); i++){
  $("td#i_"+(i + 1)).html('<img src="content/images/albums/'+inv[i]["song_id"]+'.png" title="'+inv[i]["song_name"]+'" id="'+(i+1)+'">');
}

问题

一切正常，我得到我需要的东西（表填充），但我在每个td的底部都有一些填充/边距，里面有一个图像。即使我将单元格的宽度和高度设置为100px，在Firebug中我可以看到103.5px的高度，为什么会发生这种情况？我已经读过它可以DOCTYPE导致它，但是我无法删除它，还有另一种解决方案吗？

感谢。

Answer 1

“但我在每个td 的底部都有一些填充/边距，其中有一个图像。”

因为img是一个内联元素，这就是为什么你看到底部的空白区域，所以使用这个

table img {
    display: block;
}

现在这将定位table元素内的所有图片，因此如果您想要特定的图片，请改用class并指定

table img.your_class {
    display: block;
}

Demo

在第一张图片中，我使用style="display: block;"并使用内联编写，而不是其他两张图片，因此，您将看到下两张图片的空白区域，而不是第一张图片

表不需要的填充

1 个答案: