在Firefox中的输入框大小调整文本 [英] Box sizing on inputs in firefox hides text

问题描述

我有一个问题，当应用 -moz-box-sizing：border-box; 到输入，似乎我输入的文本是在某处隐藏或溢出

I have an issue with Firefox when applying -moz-box-sizing : border-box; to inputs, seems like the text I type in is somewhere hidden or overflown or something.

您可以在这里查看问题：测试（将窗口大小调整为小于980像素，因为它是移动版）;

You can see the issue in here : Test ( resize your window to a size smaller than 980px because it's a mobile version );

那么，问题是什么？因为我尝试了一切我可以找到，唯一的工作是删除 -moz-box-sizing：border-box; 属性（：

So what could be the issue there ? Because I tried everything I could find, and the only thing that worked is removing the -moz-box-sizing : border-box; property (:

推荐答案

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

You should set the height to 100%. I tried the following CSS for your input fields, and it helped:

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

==>原因是，你的填充20px太多，尝试首先删除填充，你会看到输入字段的文本突然显现;-)。在我看到这个，我设置高度为100％。现在你可以减少填充，例如。 10px，一切看起来不错。

==> The reason is, that your padding of 20px is too much. Try first removing the padding. You will see that the input field's text gets visible suddenly ;-). After I saw this, I set the height to 100%. Now you can decrease the padding to e.g. 10px and everything looks fine.

这篇关于在Firefox中的输入框大小调整文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！