TD高度问题在表中

Question

我正在使用以下结构的表格 -

**HTML:**
    <table>
        <tr class="table_row row_over">
          <td><input type="checkbox" name="check_data_1" class="check_box" /></td>
          <td>
              Data1
          </td>
          <td>$0.000</td>
          <td>$0.000</td>
          <td>$0.000</td>
          <td>
              <span class="row_controls">
                  <a href="#" class="icon_22 icon_delete">
                     <span>Delete</span>
                  </a>
              </span>
          </td>
        </tr>
    </table>

**CSS:**
.icon_delete {
    background-position: 0 0px;
}
.icon_22 {
    background-image: url("../images/icon_sprite.png");
    background-repeat: no-repeat;
    display: inline-block;
    height: 24px;    
    width: 24px;
    margin-right: 5px;
}

问题： TD的高度根据图标高度增加。它会增加TD的高度并与其他td错误对齐，因为我在TD的底部仍留有空间。

预计附图如下：

Answer 1

除非.row_controls为position: relative;且图标为position: absolute;，否则它将成为normal flow的一部分，因此会占用空间。

目前您正在使用inline-block。您需要使用定位或浮动技术将其拉出正常流程。

请尝试以下作为基础。

.row_controls {
  position: relative;
}

.icon_22 {
  position: absolute;
}

Answer 2

如果您想将图标与中间对齐，我会这样做：

将图标的CSS更改为display: block：

.icon_22 {
    background-image: url("../images/icon_sprite.png");
    background-repeat: no-repeat;
    display: block;
    height: 24px;    
    width: 24px;
    margin-right: 5px;
}

然后，因为您使用的是td，请为td指定一个类，使其在中间垂直对齐：

<td class="alignMiddle">

和CSS：

.alignMiddle {
   vertical-align: middle;
}