包含<input />的A具有不需要的最小高度

Question

如果td包含输入，则浏览器强制显示最小高度为19px。

input{ 
     height: 1px;

}
td{
    border: 1px solid red;
    height: 1px;
}

<table>
  <tr>
    <td><input type = "text" /></td>
  </tr>
</table>

请参阅此处的演示： http://jsfiddle.net/Rs2eT/160/

我的问题是：

1. 为什么td高度强制为19px？

2. 如何为td强制较小的高度？

谢谢。

Answer 1

你试过line-height吗？

input{ 
    height: 1px;

}
td{
    border: 1px solid red;
    height: 1px;
    line-height: 1px;
}

Answer 2

默认情况下，您有行高和隐含的单元格填充。请参阅小提琴：http://jsfiddle.net/Rs2eT/161/

input{ 
    height: 1px;
    
}
td{
    border: 1px solid red;
    height: 1px;
    padding:0; /*there is padding that isn't specified in the declaration*/
    line-height:1px; /*td presumes line height of 1em on all contents */
}

<table>
    <tr>
        <td><input type = "text" /></td>
    </tr>
</table>

Answer 3

行高：1px

应该解决你的问题。浏览器具有默认行高。

Answer 4

input{ 
    height:19px;
    display:block;
    border:none;
}