Question

尽管使用了-moz-placeholder属性，但我的文本输入占位符拒绝在IE和Firefox中显示。如果您使用的是Firefox或IE，可以查看on the contact page here。

有人可以帮助我一直试图解决这个问题几周。我的代码示例如下：

 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;
}

Answer 1

正如luke2012所述，当box-sizing: border-box;用于文本类型输入字段时会发生这种情况。但是，这仅在使用固定高度时（例如在Bootstrap框架中）并且顶部和底部填充太多时才会发生。这不仅可以防止占位符文本显示，还可以在Firefox中输入文本。

我发现更好的解决方案是保留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
}

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

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

Answer 2

::-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;
}

Answer 3

似乎-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;
}

删除该行会对您的输入大小造成严重破坏，因此您可以为CSS大小调整添加一般规则。

*, *:before, *:after {
    -moz-box-sizing: border-box;
}

Answer 4

尝试减少顶部和底部填充。垂直填充如何覆盖占位符。不要忘记将元素的height设置为100%。

input[type="email"], input[type="password"], input[type="text"] { padding: 0 20px; height: 100%; }

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

4 个答案: