HTML：宽度为 100% 的子输入大于固定宽度的父表答案

【问题标题】：HTML: Child input with width 100% is larger than fixed width parent tableHTML：宽度为 100% 的子输入大于固定宽度的父表
【发布时间】：2016-08-10 13:30:09
【问题描述】：

我正面临一个相当奇怪的情况..

我正在尝试使文本输入填充其整个表格单元格，但是当在其上使用 width:100% 时，您可以看到它变得比它的父级大，即使没有使用填充或边距。

这是 jsfiddle：https://jsfiddle.net/ecxdkwwz/

将margin:0px 应用于输入时，我可以看到一些变化，因为它实际上变小了，但它仍然比上面的 div 大，我真的想知道为什么..（我使用的是 firefox）

【问题讨论】：

我使用了并且它比父级小。
这是因为输入会自动添加一些填充和边距。在 Firefox 中，它的边距为 2，周围的内边距为 1。
谢谢！我想知道为什么尺寸不一样。这种行为在所有浏览器上都一样吗？
嗯，实际上即使去掉所有的内边距和外边距，你也可以看到它仍然比上面的 div 略大.. 为什么？ jsfiddle.net/benit2/4T3qu/2 我认为是边框在这样做，但是有没有办法让边框环绕输入并保持相同的宽度？

标签： html css

【解决方案1】：

我刚刚添加了以下css，它解决了问题

css

input[type = 'text']{
 width:100%;
 background:lightblue;
 box-shadow:none;
 text-shadow:none;
 border:none;

}

工作代码：JSFIDDLE

【讨论】：

其实如果要保留边框，需要覆盖默认的margin和padding为0，如上面cmets中提到的。