12

我正在使用 Twitter 引导 CSS。您可以在下面看到相同的代码在 FireFox 和 Chrome 中的显示方式不同。

这很奇怪。Firebug 告诉我占位符的 css 设置为浅灰色：

:-moz-placeholder {
    color: #999999;
}

这应该会影响所有元素中的所有占位符，因为它在 Chrome 中正确完成。但是在 Firefox 中为什么可以textareas正确应用，但input不是呢？我怎样才能解决这个问题？

<input id="id_referred_by" type="text" maxlength="50" name="referred_by" placeholder="...was referred by?">

<textarea id="id_contacts_interests" name="contacts_interests" cols="40" placeholder="Any particular interests?" rows="4"></textarea>

铬合金：

在此处输入图像描述

火狐：

在此处输入图像描述

更新：

下面的评论给了我一个想法：

Inputhas 不像条目textarea被color: #9999划掉，这意味着某些东西正在覆盖它。

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    color: #555555;
    display: inline-block;
    font-size: 13px;
    height: 18px;
    line-height: 18px;
    margin-bottom: 9px;
    padding: 4px;
}

事实上就是这样color: #555555;。当我在萤火虫中禁用它时，一切正常。为什么 Chrome 不关心这个而 Firefox 关心？任何提示如何在两个浏览器中解决此问题？我对 CSS 还是很陌生。

4

4 回答 4

9

问题是 Firefox 改变了字段的不透明度，并且你认为它是不同的颜色，但它不是......添加“opacity:1;” 它在所有浏览器中的工作方式完全相同

input:-moz-placeholder {
    color: #999999;
    opacity: 1;
}

input::-moz-placeholder {
    color: #999999;
    opacity: 1;
}
于 2013-04-16T18:07:09.367 回答
8

由于这个奇怪的伪元素，我前一段时间做了一点小玩意，结果？您不能在选择器之间添加逗号，您必须指定您的规则两次，这很遗憾。

的HTML： 

<input type="text" id="test-webkit" placeholder="test-webkit" /><br />
<input type="text" id="test-moz" placeholder="test-moz" /><br />
<input type="text" id="test-both" placeholder="test-both" /><br />
<input type="text" class="test-both" placeholder="test-both-separately" />​

CSS： 

/* Works on Webkit */
#test-webkit::-webkit-input-placeholder {
    color: red;
}

/* Works on Firefox */    
#test-moz:-moz-placeholder {
    color: red;
}

/* Don't work */
#test-both::-webkit-input-placeholder, #test-both:input:-moz-placeholder {
    color: red;
}

/* Works on both */
.test-both::-webkit-input-placeholder {
    color: red;
}
.test-both:-moz-placeholder {
    color: red;
}​

小提琴。

于 2012-07-04T19:23:34.067 回答
2

作为您需要使用的占位符完整列表下方的更新。:-moz 在较新的 firefox 版本中已弃用。

您需要多次指定规则，并且不能将它们组合在一行中。这是因为浏览器会将它们解释为单个选择器。它将导致错误，因为 Firefox 不知道 webkit 规则。

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color:#bbb;
  font: 12px Verdana, Arial,Tahoma, sans-serif;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color:#bbb;
  font: 12px Verdana, Arial,Tahoma, sans-serif;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  color:#bbb;
  font-family: 12px Verdana, Arial,Tahoma, sans-serif;
  font: normal;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color:#bbb;
  font: 12px Verdana, Arial,Tahoma, sans-serif;
}
于 2013-04-12T10:10:27.700 回答
0

清除您的 Firefox 缓存（可能就足够了）。

并用萤火虫检查

如果尚未完成，请安装 firebug https://addons.mozilla.org/en-US/firefox/addon/firebug/

右键单击输入，然后单击 Inspect Element with Firebug。

查看是否存在具有更高优先级的 css 属性。

在此处输入图像描述

于 2012-07-04T19:25:22.800 回答