css - Firefox中输入的框大小隐藏文本

Question

我在应用-moz-box-sizing : border-box;输入时遇到了 Firefox 问题，似乎我输入的文本在某个地方隐藏或溢出或其他东西。

您可以在这里看到问题：测试（将窗口大小调整为小于 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%;
}

==> 原因是，您的 20px 填充太多了。尝试首先删除填充。您会看到输入字段的文本突然变得可见；-)。看到这个后，我将高度设置为 100%。现在您可以将填充减少到例如 10 像素，一切看起来都很好。

Answer 2

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

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

不得不追赶这个width: calc(100% - <padding L+R>)，这是一个劣势。

Answer 3

我通过为输入文本标签添加自定义填充以不同方式解决了这个问题

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

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

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

Answer 4

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