文本输入占位符不在IE和Firefox中显示

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.

尽管使用了-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;
}

4 个解决方案

#1

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所说，当盒装尺寸发生时会发生这种情况：边框盒;正在用于文本类型输入字段。然而，这仅在使用固定高度时（例如在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).

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

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.

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

4 个解决方案

#1

更多相关文章

随机推荐