6

ここで私のものとほぼ同じケースを見つけました。しかし、受け入れられた答えは私にはうまくいかないので、新しい質問をしてもいいと思います.

下の写真は、すべての主要なブラウザー (少なくとも IE8+、Firefox、および Chrome) で実現したいものです。TD 内に配置された INPUT は、親の幅と高さの両方を埋めます。

ここに画像の説明を入力

私の問題は、以下のコード スニペットを使用して Chrome で実行できないことです。前もって感謝します

更新: Chrome に関する私の問題の説明: よく見ると、上下の境界線に 1 ピクセルまたは 2 ピクセルのパディングがあります。これは、Windows 7 の Chrome バージョン 47.0.2526.111 m での私です (より明確に表示するには、新しいウィンドウで 開いてください)ここに画像の説明を入力

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>

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 に答える