INPUT盒子大小的边框,在Chrome内部的TD问题中具有100%的高度和宽度

Question

我在这里发现了一个几乎相同的案例.但是接受的答案对我不起作用,所以我希望我提出一个新问题.

下面的图片是我想在所有主流浏览器中实现的(至少IE8 +,Firefox和Chrome).置于TD内的INPUT填充了父母的宽度和高度.

我的问题是,我无法在Chrome中使用以下代码段完成此操作.提前致谢

更新:我在Chrome上的问题解释说:如果仔细观察,顶部和底部边框有1或2px填充.这是我在Windows 7上的Chrome版本47.0.2526.111 m(请在新窗口中打开以查看更清晰)

UPDATE2:样本上的大错误.DIV在不使用盒子大小的情况下适应他们的父母.我真正想要的是INPUT也适应他们的父母.刚刚更新了我的代码片段.

table {
  border-collapse: collapse;  
  width: 100%
}
td {
  height: 100px;
  border: 1px #ccc solid;
}
input {
  border: 1px #ccc solid;
  height: 100%;
  width: 100%;  
  box-sizing: border-box;          /* works fine with IE8+ */
  -moz-box-sizing: border-box;     /* works fine Firefox */
  -webkit-box-sizing: border-box;  /* height is not correct in Chrome */
/*-webkit-box-sizing: content-box;    width is not correct in Chrome  */
}

<table>
  <tr>
    <td>
      <input type="text" value="this INPUT need to adapt to its parent TD">
    </td>
  </tr>
</table>

Answer 1

事实上，我已经寻找这个问题的答案很长一段时间了（自 2014 年以来）。互联网上有一些帖子说这是 Chromium 的一个错误。我设法回忆起这里的一个链接。尽管如此，我怀疑很快就会有答案。

同时，我想为所有遇到与我相同问题的人提出一个快速而肮脏的解决方案：对于 chrome，将所有 INPUT 包装在一个 DIV 中。

$(function() {
  
  // if agent is of Chrome
  var isChrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase());
  
  if (isChrome) {
    $("table td>:input").wrap($("<div>", {"class": "input-container"}));
  }
});

table {
  border-collapse: collapse;  
  width: 100%
}
td {
  height: 100px;
  border: 1px #ccc solid;
}
input {
  border: 1px #ccc solid;
  height: 100%;
  width: 100%;  
  box-sizing: border-box;          /* works fine with IE8+ */
  -moz-box-sizing: border-box;     /* works fine Firefox */
/*-webkit-box-sizing: border-box;     height is not correct in Chrome
 *-webkit-box-sizing: content-box;    width is not correct in Chrome  */  
}
div.input-container {
  height: 100%;
  width: 100%;  
  -webkit-box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="text" value="this INPUT need to adapt to its parent TD">
    </td>
  </tr>
</table>