Css firefox中输入框的大小会隐藏文本

在应用

-moz-box-size:border-box时，我对Firefox有一个问题对于输入，我键入的文本似乎隐藏在某个地方或溢出或其他地方

您可以在这里看到问题：（将窗口大小调整为小于980px的大小，因为它是移动版本）

那么，问题出在哪里呢？因为我尝试了我能找到的一切，唯一有效的方法是删除
-moz-box-size:border-box属性（：
您应该将高度设置为100%。我为您的输入字段尝试了以下CSS，它很有帮助：

input[type="text"] {
    -moz-box-sizing: border-box;
    font-size: 16px;
    height: 100%;
    padding: 20px;
    width: 100%;
}

==>原因是，20px的填充太多。请先尝试删除填充。您将看到输入字段的文本突然可见；-）。在我看到这个之后，我将高度设置为100%。现在，您可以将填充减少到例如10px，一切看起来都很好。
我有这个问题，但最初是在Safari 6+中。一些文本输入支持上/下填充，但其他文本输入不支持上/下填充，结果更短。通过使用
height:100%
，所有这些都像这里建议的那样，它们确实变得一致，并且似乎尊重顶部/底部的填充。然而，它在高度上增加了两个额外的像素

input[type="text"] {
padding-top:0;
padding-bottom:0;
vertical-align:middle;
}

最后，我在所有的盒子上都做了
box size:content-box
，这使得它们尊重上/下填充，但没有额外增加高度像素

但是，我必须使用
宽度：calc（100%-）
来解决这个问题，这是一个缺点。
我通过为输入文本标记添加自定义填充来解决这个问题

input[type="text"] {
  padding: 6px 12px 12px 6px;
}

input[type="email"] {
  padding: 6px 12px 12px 6px;
}

input[type="password"] {
  padding: 6px 12px 12px 6px;
}

也许这种行为是由于推特的bootstrap通用样式，它的高度可能设置为auto，或者根本没有设置。。。但是，谢谢，这似乎解决了这个问题（：我也发现，与大多数设备相比，如果您的输入上没有
16px
，当您关注它时，它会放大：）我想是Windows Phone…您能补充一些解释吗？这有点代码转储。最好能解释一下。