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

Question

在将-moz-box-sizing : border-box;应用于输入时，我遇到了Firefox的问题，似乎我输入的文本隐藏或溢出的内容或其他内容。

您可以在此处查看问题：Test（将窗口大小调整为小于980像素的大小，因为它是移动版本）;

那么问题可能是什么？因为我尝试了所有我能找到的东西，唯一有用的就是删除-moz-box-sizing : border-box;属性（：

Answer 1

您应该将高度设置为100％。我为你的输入字段尝试了以下CSS，它有所帮助：

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

==＆GT;原因是，你的20px填充太多了。首先尝试删除填充。您将看到输入字段的文本突然显示;-)。看到这个后，我将高度设置为100％。现在你可以减少填充到例如10px，一切都很好。

Answer 2

我遇到了这个问题，但最初是在Safari 6+中。一些文本输入尊重填充顶部/底部，但其他文本输入没有，最终缩短。通过在这里建议的所有这些使用height: 100%，他们确实变得一致并且似乎尊重填充顶部/底部。但是，它增加了几个额外的像素。

最后，我最终对所有这些做了box-sizing: content-box，这使得他们尊重填充顶部/底部但没有额外添加的高度像素。

不过要用width: calc(100% - <padding L+R>)来追逐这个，这是一个不利因素。

Answer 3

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