Firefox中输入的框大小隐藏文本答案

【问题标题】：Box sizing on inputs in firefox hides textFirefox中输入的框大小隐藏文本
【发布时间】：2012-10-09 21:27:18
【问题描述】：

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

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

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

【问题讨论】：

我还发现，在大多数设备上，如果您在输入上没有 16px，当您专注于它时它会放大 :) 我认为是 Windows Phone 。 ..

标签： css firefox

【解决方案1】：

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

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

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

【讨论】：

也许这种行为是由于 Twitter 的引导程序一般样式，它可能将高度设置为 auto 或者根本不设置......但是谢谢，这似乎解决了这个问题（：跨度>

【解决方案2】：

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

【讨论】：

你能补充一些解释吗？
这有点像代码转储。尝试给出一些解释会很好。

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：