HTML输入字段在Firefox中不起作用

Question

我的登录表格不适用于FIREFOX。 你不能在字段内写字（或者至少看起来像那样）。

在Chrome浏览器允许的情况下，在Chrome中一切正常，也在IE中。

这是我的小提琴： http://jsfiddle.net/W39EA/6/

我已经调试了它，发现在Firefox中导致错误的行是：

  .access .form-control {
     padding: 21px 15px;
     margin: 10px 0px; 
  }

他们处于小提琴的最底层。

如果删除它们，Firefox会再次运行。但实际上我需要它们为我的输入字段添加必要的填充。

有没有人建议解决这个问题？

Answer 1

这是因为你在输入字段上有这么多填充。您可以设置输入字段的高度，然后只添加一些顶部和底部填充。 -

如果您将输入CSS更改为：

.access .form-control {
    padding: 5px 15px;
    margin: 10px 0px; 
    height:40px;
}

这应解决问题 - jsfiddle.net/W39EA/7

Answer 2

我认为这个问题是因为Firefox使用的box-sizing属性输入与Chrome和IE不同。

所以我添加了＆＃34; box-sizing：content-box＆＃34;在你的CSS。之后，我在两个浏览器中都获得了相同的结果。您现在可以根据您的要求减少填充大小。

.access .form-control {
padding: 10px 7px;
margin: 10px 0px; 
-moz-box-sizing:content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}