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前缀（click here for browser support）实现-moz-属性。将您的通用选择器更改为：

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

div交叉浏览器内的输入框填充配件

1 个答案: