为什么textarea高于文本输入？

Question

发现它，抱歉，更改填充并忘记更改textarea。 我的错。 会删除）

我正在尝试在同一行上创建带有文本输入和textarea输入的表，但不能使textarea与文本输入的高度相同。 任何人都可以告诉我，为什么文本输入和textarea有不同的高度以及如何解决这个问题？ 正如您所看到的，textarea高出2px，而chrome检查员告诉我同样的情况。 怎么了，怎么解决？ （对不起一个大文本，网站告诉我，我有“大部分代码”，并且必须添加一些细节。不知道，我还有什么可以添加到该代码，问题很明显）））谢谢！

 div { background: #ddd; } input#te { position: relative; outline:0; border: 1px solid #a78; padding-left: 0.5em; padding-right: 0.5em; margin: 0; background: transparent; height: 5em; line-height: 5em; vertical-align: middle; } textarea#ta { position: relative; outline:0; border: 1px solid #a78; padding-left: 0.5em; padding-right: 0.5em; margin: 0; background: transparent; height: 5em; vertical-align: middle; resize: none; } 

 <table> <tr> <td> <div> <input type=text id="te" value="input is 2px smaller in chrome"> </div> </td> <td> <div> <textarea id="ta">textarea is 2px higher in chrome</textarea> </div> </td> </tr> </table 

Answer 1

textarea填充顶部2px，

输入只有1px。

Answer 2

更改textarea上的填充：

 div { background: #ddd; } input#te { position: relative; outline:0; border: 1px solid #a78; padding-left: 0.5em; padding-right: 0.5em; margin: 0; background: transparent; height: 5em; line-height: 5em; vertical-align: middle; } textarea#ta { position: relative; outline:0; border: 1px solid #a78; padding: 1px 0.5em; margin: 0; background: transparent; height: 5em; vertical-align: middle; resize: none; } 

 <table> <tr> <td> <div> <input type=text id="te" value="input is 2px smaller in chrome"> </div> </td> <td> <div> <textarea id="ta">textarea is 2px higher in chrome</textarea> </div> </td> </tr> </table 

Answer 3

要解决此问题，请将box-sizing: border-box到input元素和textarea元素（以便在Chrome中使用修复）。

 div { background: #ddd; } input#te { position: relative; outline: 0; border: 1px solid #a78; padding-left: 0.5em; padding-right: 0.5em; margin: 0; background: transparent; height: 5em; line-height: 5em; vertical-align: middle; box-sizing: border-box; } textarea#ta { position: relative; outline: 0; border: 1px solid #a78; padding-left: 0.5em; padding-right: 0.5em; margin: 0; background: transparent; height: 5em; vertical-align: middle; resize: none; box-sizing: border-box; } 

 <table> <tr> <td> <div> <input type=text id="te" value="input is 2px smaller in chrome"> </div> </td> <td> <div> <textarea id="ta">textarea is 2px higher in chrome</textarea> </div> </td> </tr> </table> 

Answer 4

box-sizing: border-box; 是您需要放置在输入和文本区域。 也适用于选择。

通过使用box-sizing: border-box; 这意味着你不必调整所有的宽度，填充和线高，你可以拥有一切相同的东西

 div { background: #ddd; } input#te { position: relative; outline:0; border: 1px solid #a78; padding-left: 0.5em; padding-right: 0.5em; margin: 0; background: transparent; height: 5em; line-height: 5em; vertical-align: middle; box-sizing: border-box; } textarea#ta { position: relative; outline:0; border: 1px solid #a78; padding-left: 0.5em; padding-right: 0.5em; margin: 0; background: transparent; height: 5em; vertical-align: middle; resize: none; box-sizing: border-box; } 

 <table> <tr> <td> <div> <input type=text id="te" value="input is 2px smaller in chrome"> </div> </td> <td> <div> <textarea id="ta">textarea is 2px higher in chrome</textarea> </div> </td> </tr> </table