在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屋!