java - INPUT box-sizing border-box with 100% height and width inside TD issue in Chrome

Question

我发现了一个与我几乎相同的案例 here .但是接受的答案对我不起作用，所以我希望我提出一个新问题没关系。

pic下面是我想在所有主流浏览器(至少 IE8+、Firefox 和 Chrome)中实现的目标。放置在 TD 内的 INPUT 会填充其父项的宽度和高度。

我的问题是我无法使用以下代码片段在 Chrome 中完成它。提前致谢

更新:我在 Chrome 上的问题解释如下: 如果仔细观察，顶部和底部边框有 1 或 2px 的填充。这是我在 Windows 7 上的 Chrome 版本 47.0.2526.111 m(请在新窗口中 open 看得更清楚)

更新 2:样本上的大错误。 DIV 在不使用 box-sizing 的情况下可以很好地适应它们的父级。我真正想要的是 INPUT 也可以适应他们的 parent 。刚刚再次更新了我的代码片段。

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

这很奇怪，但我认为您看到的是一个 td，其固定高度为 100px，顶部和底部的边框宽度为 1px，从而脱离了子 div s高度100%计算。

是否可以将高度分配给 div 而不是像下面这样的 td ？这适用于我的 chrome。

table {
  border-collapse: collapse;  
  width: 100%
}
td {
  border: 1px #ccc solid;
}
div {
  border: 1px #ccc solid;
  height: 100px;
  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>
      <div>BOX1</div>
    </td>
    <td>
      <div>BOX2</div>
    </td>
    <td>
      <div>BOX3</div>
    </td>
  </tr>
</table>