div跨浏览器内的输入框填充答案

【问题标题】：input box padding fitting inside div cross browserdiv跨浏览器内的输入框填充
【发布时间】：2013-11-04 18:02:17
【问题描述】：

我有一个设置在特定高度的 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;
}

【问题讨论】：

添加溢出：无；到发生这种情况的 div。这应该可以解决您的问题。
问题不只是溢出，它在 div 上被推到比其他浏览器更远的地方，所以看起来不太好。顶部有一个巨大的间隙（填充？）。

标签： html css input cross-browser padding

【解决方案1】：

Firefox 使用 -moz- 前缀 (click here for browser support) 实现 box-sizing 属性。将您的通用选择器更改为：

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

【讨论】：

我有 -moz，我只是添加了一个 box-sizing 只是为了表明我有它。不错的收获
@bryan 我唯一的其他建议是使用padding: 0 3px 0 0; 而不是padding-left: 3px 完全重置input 元素的填充。
我认为您的意思是padding: 0 0 0 3px;，但这不起作用。我得写一个更详细的例子。