css - 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%;
}

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