文本输入元素的边框超出了包含表格答案

【问题标题】：Border of text input element goes beyond containing table文本输入元素的边框超出了包含表格
【发布时间】：2011-07-05 22:51:24
【问题描述】：

对于以下 HTML，输入元素的宽度超出了表格边框的边缘。什么是让输入元素占据整个单元格内容但在右边缘仍具有与左侧显示相同的边距的正确方法？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<body>
<table style="border: 1px solid #000000;" width="100%">
<tr>
<td><input style="width:100%"/></td>
</tr>
</table>
</body>
</html>

【问题讨论】：

嗯？它不应该那样做。你能举个例子吗（最好是jsfiddle.net）？在哪些浏览器中会发生这种情况？

标签： html

【解决方案1】：

原因是输入宽度的评估没有考虑输入本身的默认边框（可能还有填充，IIRC）。尝试设置padding: 0px; border: 0px 并检查它。

另外，请参阅 Problem with <input type='text' /> and <textarea> width 或How can I make a TextArea 100% width without overflowing when padding is present in CSS? 寻求解决方案 - 这已经出现过。

【讨论】：