IE和Firefox浏览器中无法显示文本输入占位符。

Question

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

请问有人可以帮忙吗？我已经试图解决这个问题几周了。以下是我的代码示例：

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

- Michelle M.

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; 并根据需要调整顶部和底部填充。

- Simon Watson

---

今天遇到了这个问题。这个解释和解决方案很好用。谢谢！ - Vinay Raghu

我曾遇到相同的问题，所以我移除了 height 属性，并添加了兼容性属性： -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 然后一切正常工作。 - Leo

@Leo 我不确定那个解决方案在 Firefox 中是否有效。你能提供一个可行示例的链接吗？ - Simon Watson

@SimonWatson 你好，我唯一有的可行示例是我的网页。 - Leo

@Leo 所以，这个问题也可以通过设置 height: auto;（或者如果没有其他高度 css 应用，则删除 height）并根据需要调整顶部和底部填充来解决。我已经更新了我的答案，澄清了在输入字段上设置固定高度是导致此问题发生的原因之一。 - Simon Watson

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

- Milan and Friends

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中添加一个box-sizing的通用规则。

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

- luke2012

Answer 4

尝试减少顶部和底部填充。某种方式，垂直填充会遮盖占位符。不要忘记将元素的高度设置为100％。 input[type="email"], input[type="password"], input[type="text"] { padding: 0 20px; height: 100%; }

- Ata Iravani