我发现了一个与here几乎相同的案例。但是接受的答案对我不起作用,所以我希望我提出一个新问题是可以的。
下面的pic是我想要在所有主要浏览器(至少是IE8 +,Firefox和Chrome)中实现的功能。放置在TD内的INPUT会填充其父级的宽度和高度。
我的问题是,无法使用以下代码段在Chrome中完成此操作。提前致谢
更新:我在Chrome上的问题解释了:
如果您仔细看一看,顶部和底部边框有1或2px的填充。这是我在Windows 7上的Chrome版本47.0.2526.111 m(请在新窗口中open查看更清晰的信息)
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>