Question

我找到了与我here几乎相同的案例。但是接受的答案对我没有用，所以我希望我能提出一个新问题。

以下pic是我想要在所有主流浏览器中实现的（至少IE8 +，Firefox和Chrome）。放置在TD内的INPUT填充了父母的宽度和高度。

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

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

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

这是一个奇怪的，但我认为你看到的是td，固定高度为100px，1px顶部和底部的边框宽度抛弃了孩子div的高度100％计算。

是否可以将高度指定为div而不是td，如下所示？这对我来说很有用。

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>

Answer 2

为什么不使用简单的css布局而不是使用表格进行过度杀戮？

Fiddle

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
}

.padding {
  height: 100px;
}

.outer_border {
  padding: 1px;
  border: 1px solid black;
}

input {
  border: 1px black solid;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

<强> HTML

 <div class="container">
  <div class="outer_border">
    <div class="padding">
      <input type="text" value="this INPUT need to adapt to its parent TD">
    </div>
  </div>
</div>

Answer 3

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

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

＆＃13;

$(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"}));
  }
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

3 个答案: