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

我在使用-moz-box-sizing : border-box;输入时遇到了Firefox问题，看起来像我输入的文本是某处隐藏或溢出或某事。在Firefox中的输入框大小隐藏文本

你可以在这里看到这个问题：Test（调整你的窗口大小小于980px，因为它是一个移动版本）;

那么这有什么问题呢？因为我什么都试过了我能找到的，只有那工作是去除-moz-box-sizing : border-box;财产（的东西：

2012-10-19 Roland

我也发现了比大多数设备，如果你没有输入的'16px'，它当你专注于它时会放大:)我认为这是Windows Phone ... – Roland

应设置高度为100％，我想下面的CSS您的输入字段，它帮助：

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

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

来源

2012-10-19 09:47:04

也许这种行为是由于Twitter的引导程序一般造型造成的，它可能会将高度设置为auto或者根本不设置......但是谢谢，这似乎照顾到了这个问题（： – Roland

-2

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

来源

2014-06-27 06:12:56 user2257068

你可以添加一些解释吗？ –

这是一个代码转储，试图给出一些解释是很好的。 – Will

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

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

不得不追求这与width: calc(100% - <padding L+R>)虽然，这是一个缺点。

来源

2015-04-26 00:07:22 atwixtor

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

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

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

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

来源

2017-08-10 09:18:50 seza443

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

回答

相关问题