為什么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