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>

クロム：

ここに画像の説明を入力

ファイアフォックス:

ここに画像の説明を入力

アップデート：

以下のコメントは私にアイデアを与えました：

Inputこれは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;です。firebugで無効にすると、すべて機能します。Chrome はこれを気にしないのに、Firefox は気にするのはなぜですか? 両方のブラウザでこれを修正する方法はありますか? 私はまだcssに慣れていません。

4

4 に答える 4

8

この奇妙な疑似要素のために、私は少し前に少しフィドルを作りました。結果は ? セレクターの間にコンマを追加することはできません。ルールを 2 回指定する必要があります。これは残念です。

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 に答える
0

Firefox のキャッシュをクリアします (これで十分かもしれません)。

そしてfirebugで検査する

まだ完了していない場合は、firebug をインストールします https://addons.mozilla.org/en-US/firefox/addon/firebug/

入力を右クリックし、[Firebug で要素を検査] をクリックします。

優先度の高い CSS プロパティがあるかどうかを確認します。

ここに画像の説明を入力

于 2012-07-04T19:25:22.800 に答える