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

【问题标题】：Text input placeholders not displaying in IE and FirefoxIE 和 Firefox 中不显示文本输入占位符
【发布时间】：2013-12-28 18:03:56
【问题描述】：

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

【问题讨论】：

标签： html cross-browser placeholder

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

【讨论】：

今天遇到了这个问题。这个解释和解决方案很好用。谢谢！
我有同样的问题，所以我删除了height 属性，添加了兼容性属性：-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;，一切都很好，
@Leo 我不确定该解决方案是否适用于 Firefox。你能提供一个工作示例的链接吗？
@SimonWatson 嗨，我唯一的工作示例是我的webpage。
@Leo 是的，在您的示例中可以正常工作，因为您没有使用像 Bootstrap 这样的框架，它为各种输入字段设置默认的固定高度。因此，在您的情况下，删除高度意味着它将使用浏览器默认高度自动。对于像使用 Bootstrap 的 OP 这样的人，仅删除高度将不起作用，因为随后将使用 Bootstrap 默认的固定高度。输入字段的固定高度也是发生这种情况的部分原因。

【解决方案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;
}

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案4】：

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

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

【讨论】：