6

我在这里找到了一个与我的几乎相同的案例。但是接受的答案对我不起作用，所以我希望我提出一个新问题是可以的。

下图是我想在所有主流浏览器（至少 IE8+、Firefox 和 Chrome）中实现的目标。放置在 TD 内的 INPUT 填充其父级的宽度和高度。

在此处输入图像描述

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

更新：我在 Chrome 上的问题解释说：如果您仔细观察，顶部和底部边框有 1 或 2 像素的填充。这是我在 Windows 7 上的 Chrome 版本 47.0.2526.111 m（请在新窗口中打开以看得更清楚） 在此处输入图像描述

UPDATE2：样本上的大错误。DIV 在不使用 box-sizing 的情况下很好地适应其父级。我真正想要的是 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>

4

3 回答 3

1

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

小提琴

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>
于 2016-01-19T09:24:51.233 回答
1

这是一个奇怪的问题，但我认为您所看到的是td一个固定高度为 100 像素、顶部和底部为 1 像素的边框宽度，这会导致孩子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>

于 2016-01-14T01:56:01.730 回答
0

我实际上正在寻找这个问题的答案很长一段时间（自 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>

于 2016-01-19T08:10:49.083 回答