Html 文本输入占位符未在 IE 和 Firefox 中显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20507731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text input placeholders not displaying in IE and Firefox
提问by Michelle M.
My text input placeholders refuse to display in IE and Firefox despite having used the -moz-placeholder attribute. This can be viewed on the contact page hereif you are using Firefox or IE.
尽管使用了 -moz-placeholder 属性，但我的文本输入占位符拒绝在 IE 和 Firefox 中显示。这可以被看作联系页面放在这里，如果你使用的是Firefox或IE浏览器。
Can someone please help I have been trying to figure this out for weeks. A sample of my code is below:
有人可以帮助我几个星期以来一直试图解决这个问题。我的代码示例如下：
input::-moz-placeholder, textarea::-moz-placeholder {
color: #aaa;
font-size: 18px;
}
input:-ms-input-placeholder, textarea::-ms-input-placeholder {
color: #aaa;
font-size: 18px;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #aaa;
font-size: 18px;
}
回答by Simon Watson
As luke2012 stated this happens when box-sizing: border-box;is being used on text type input fields. However this only happens when a fixed height is being used (such as in the Bootstrap framework) and there is too much top and bottom padding. Which not only prevents placeholder text from displaying but also input text as well in Firefox.
正如 luke2012 所说，当box-sizing: border-box;用于文本类型输入字段时会发生这种情况。然而，这只发生在使用固定高度（例如在 Bootstrap 框架中）并且顶部和底部填充过多时。这不仅会阻止显示占位符文本，还会阻止在 Firefox 中输入文本。
I find that the better solution is to keep box-sizing: border-box;and to instead remove the top and bottom padding and increase the height to the total height that you want the input field to have (including any border).
我发现更好的解决方案是保留box-sizing: border-box;并移除顶部和底部填充并将高度增加到您希望输入字段具有的总高度（包括任何边框）。
input[type="email"], input[type="password"], input[type="text"]
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 42px; // Increase height as required
margin-bottom: 30px;
padding: 0 20px; // Now only left & right padding
}
This keeps things more consistent and works well on frameworks such as Bootstrap.
这使事情更加一致并且在 Bootstrap 等框架上运行良好。
Alternatively, you could increase the fixed height or set height: auto;and adjust the top and bottom padding as required.
或者，您可以增加固定高度或height: auto;根据需要设置和调整顶部和底部填充。
回答by mdesdev
::-webkit-input-placeholder { /* Chrome, Safari */
color: #aaa;
font-size: 18px;
}
:-moz-placeholder { /* Firefox 18- */
color: #aaa;
font-size: 18px;
}
::-moz-placeholder { /* Firefox 19+ */
color: #aaa;
font-size: 18px;
}
:-ms-input-placeholder { /* Internet Explorer */
color: #aaa;
font-size: 18px;
}
回答by luke2012
It seems -moz-box-sizingis causing your issue.
这似乎-moz-box-sizing是导致你的问题。
input[type="email"], input[type="password"], input[type="text"]
{
-moz-box-sizing: border-box; // remove this line
height: 25px;
margin-bottom: 30px;
padding: 20px;
}
Removing the line will play havoc with your input sizes so you can add a general rule for box-sizing to your CSS.
删除该行将对您的输入大小造成严重破坏，因此您可以为 CSS 添加框大小的一般规则。
*, *:before, *:after {
-moz-box-sizing: border-box;
}
回答by Ata Iravani
Try to reduce the top and bottom paddings.
Some how the vertical padding covers the placeholder. Do not forget to set the heightof element to 100%.
尝试减少顶部和底部的填充。一些垂直填充如何覆盖占位符。不要忘记将heightof 元素设置为100%。
input[type="email"], input[type="password"], input[type="text"]
{
padding: 0 20px;
height: 100%;
}
input[type="email"], input[type="password"], input[type="text"]
{
padding: 0 20px;
height: 100%;
}
