Question

我有一个包含输入的表格单元格：

<body>
  <table>
    <tr>
      <td><input type="submit" class="submitbutton" value=""/></td>
    </tr>
  </table>  
</body>

该输入的样式高度为20像素：

table
{
  border-spacing: 0;
  border-collapse: collapse;
}

td
{
  padding: 0;
}

.submitbutton
{
  width: 19px;
  height: 20px;
  border: 0px;
  outline: none;
  margin:0;
}

http://jsfiddle.net/VhhPf/2/

当我使用firefox并查看布局选项卡时，我可以看到输入的高度为20，但td由于某种原因而具有高度21.在chrome中，td将获得高度24。

为什么？

enter image description here

Answer 1

它是一个内联元素，因此它与文本的基线对齐。

添加vertical-align:bottom。

另见this question。

包含输入类型=“提交”的td变得比输入高，浏览器之间的数量不同

1 个答案: