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

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

java - 在Chrome的TD中,输入框大小调整的边框在TD内的高度和宽度为100%-LMLPHP

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

更新:我在Chrome上的问题解释了:
如果您仔细看一看,顶部和底部边框有1或2px的填充。这是我在Windows 7上的Chrome版本47.0.2526.111 m(请在新窗口中open查看更清晰的信息)
java - 在Chrome的TD中,输入框大小调整的边框在TD内的高度和宽度为100%-LMLPHP

UPDATE2:样本上的大错误。 DIV可以很好地适应其父级,而无需使用框大小。我真正想要的是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>

最佳答案

这是一个奇怪的问题,但是我认为您看到的是一个固定高度为100px的td,顶部和底部的边框宽度为1px,不考虑子div的高度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>

10-05 21:07
查看更多