占位符文本在 FF 和 IE 中不可见答案

【问题标题】：Placeholder Text Not visible in FF and IE占位符文本在 FF 和 IE 中不可见
【发布时间】：2017-03-02 03:48:57
【问题描述】：

我无法在 IE 11 和 FireFox 中显示占位符文本。它在 chrome 中运行良好。我只包含了 2 个字段的 HTML。

HTML

<input type="email" class="form-control CustomerNumber_Box" id="inputEmail" placeholder="DOMAIN \ NETWORK ID">

<input type="password" class="form-control CustomerNumber_Box" id="inputEmail" placeholder="PASSWORD">

CSS

.CustomerNumber_Box {
  border-bottom: 1px solid #97999B;
  border-top: none;
  border-right: none;
  border-left: none;
  border-radius: 0;
  box-shadow: none;
  padding: 27px 0;
  color: #97999b;
  font-size: 14px;
  width: 441px;
  position: relative;
  left: 14px;
  top: -5px;
  text-transform: uppercase;
}

火狐

当我调整高度和填充时，它适用于下面的 CSS

更新的 CSS：

.CustomerNumber_Box {
    border-bottom: 1px solid $tooltip_border;
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 0;
    box-shadow: none;
    padding: 9px 0;
    color: $black;
    font-size: 14px;
    width: 441px;
    position: relative;
    left: 14px;
    top: -5px;
    text-transform: uppercase;
    height: 57px;
}

【问题讨论】：

标签： html css google-chrome internet-explorer firefox

【解决方案1】：

您是否尝试过声明的元素？例如

<font color='"#FF0000"'>input</font>:-ms-input-placeholder {  
   color: #A1A1A1;
}

我没有 IE 11，所以无法测试。

【讨论】：

【解决方案2】：

如果你想对 placeholder 文本进行风格化，那么你应该遵循所有可能的 浏览器前缀：

代码片段

.CustomerNumber_Box {
  border-bottom: 1px solid #97999B;
  border-top: none;
  border-right: none;
  border-left: none;
  border-radius: 0;
  box-shadow: none;
  padding: 27px 0;
  color: #000000;
  font-size: 14px;
  width: 441px;
  position: relative;
  left: 14px;
  top: -5px;
  text-transform: uppercase;
}
.CustomerNumber_Box::-webkit-input-placeholder {
  color: #909090;
}
.CustomerNumber_Box:-moz-placeholder {
  /* Firefox 18- */
  color: #909090;
}
.CustomerNumber_Box::-webkit-placeholder {
  color: #909090;
}
.CustomerNumber_Box::-moz-placeholder {
  /* Firefox 19+ */
  color: #909090;
}
.CustomerNumber_Box:-ms-input-placeholder {
  color: #909090;
}

<input type="email" class="form-control CustomerNumber_Box" id="inputEmail" placeholder="DOMAIN \ NETWORK ID">

<input type="password" class="form-control CustomerNumber_Box" id="inputEmail" placeholder="PASSWORD">

【讨论】：

不起作用，但是当我减少填充时它似乎起作用了，如果我给它一个高度它似乎也起作用
你的代码中一定有其他东西，因为这个 sn-p 工作得很好，即使我在我的几个项目中使用它也没有任何故障。