文本输入占位符不会在IE和Firefox中显示 [英] Text input placeholders not displaying in IE and Firefox

问题描述

我的文本输入占位符拒绝在IE和Firefox中显示，尽管使用了-moz-placeholder属性。如果您使用的是Firefox或IE，则可以在此处的联系页面上查看。

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 here if you are using Firefox or 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;
}

推荐答案

box-sizing：border-box; 正用于文本类型输入字段。然而，这只发生在使用固定高度（例如在Bootstrap框架中），并且顶部和底部填充太多。这不仅阻止占位符文本显示，还在Firefox中输入文本。

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.

我发现更好的解决方案是保持 box-sizing ：border-box; ，而不是删除顶部和底部填充，并将高度增加到您希望输入字段具有的总高度（包括任何边框）。

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).

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
}

这使事情更一致，在Bootstrap等框架上运行良好。

This keeps things more consistent and works well on frameworks such as Bootstrap.

或者，您可以增加固定高度或设置 height：auto; ，并将顶部和底部填充调整为必需。

Alternatively, you could increase the fixed height or set height: auto; and adjust the top and bottom padding as required.

这篇关于文本输入占位符不会在IE和Firefox中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！