Html div cross browser内部的输入框填充配件

我在一个特定的高度设置了一个div，该div中有文本和一个输入框。在safari和chrome中，它非常适合，但在firefox中，它会溢出到div的底部，并破坏结构

HTML:

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

 *, *: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;
}

---

Firefox使用

-moz-

前缀（）实现了

框大小调整

属性。将通用选择器更改为：

*，*：之前，*：之后{
-moz框大小：边框框；
框大小：边框框；
}

添加溢出：无；这件事发生的部门。这应该可以解决你的问题。问题不仅仅是溢出，它被压在div上的距离比其他浏览器更远，所以看起来不太好。顶部有一个巨大的间隙（填充？），我有-moz，我只是添加了一个盒子大小，以显示我有它。接得好though@bryan我唯一的其他建议是使用

padding:0 3px 0完全重置
input
元素的填充

而不是

填充左：3px

。我想你的意思是

填充：0 3px但这不起作用。我得写一个更详细的例子。