html - divクロスブラウザ内の入力ボックスパディングフィッティング

Question

特定の高さに設定された div と、その div 内のテキストと入力ボックスがあります。サファリとクロムではうまく収まりますが、Firefox では div の下部にオーバーフローし、構造を台無しにしています。

HTML:

<div class="formLine">
   <div style="float:left;">Input Label</div>
   <input value="" />
</div>

CSS:

 *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.formLine {
  border-bottom:1px solid #000;
  padding:2px;
  height:18px;
}

input {
  background-color:#E2F4FE;
  height:14px;
  outline: 0;
  border:0;
  border-radius:3px;
  line-height:14px;
  padding-left:3px;
  float:left;
}

Answer 1

Firefox は、接頭辞box-sizing付きのプロパティを実装します (ブラウザのサポートについては、ここをクリックしてください)。ユニバーサル セレクターを次のように変更します。-moz-

*, *:before, *:after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}