html - div跨浏览器内的输入框填充

Question

我有一个设置在特定高度的 div，以及该 div 内的文本以及一个输入框。在 safari 和 chrome 中它非常适合，但在 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;
}