なぜこのページはChromeでは紫色ですが、Firefoxでは青色ですか？

私はまだ問題が複製できながらとして真SSCCEにこのよう親しま：あなたが見ることができるようになぜこのページはChromeでは紫色ですが、Firefoxでは青色ですか？

<!DOCTYPE html> 
<html class="colored-bg"> 
<head> 
    <title>Firefox CSS Priority Test</title> 
    <link rel="stylesheet" id="_switchSheetBackup" href="//Shared.BHStudios.org/_css/visual_Clean_Blue.css"/> 
    <link rel="stylesheet" id="_switchSheet"  href="//Shared.BHStudios.org/_css/visual_Clean_Purple.php"/> 
</head> 

<body> 
    This page should have a purple background, not a blue one. 
    <br/> 
    <a href="#" class="inverse button">This should have purple text.</a> 
</body> 
</html>

^{Live Example}

を、最初のスタイルシートが第二のスタイルシート場合のバックアップです（最小JSサイトのテーマを実装する場合、スタイルが変更されたときにユーザーに目立つちらつきが表示されません）。意図した結果は、すべてのスタイルシートが適切に読み込まれるとページが紫色になることです。

これはChromeとEdgeブラウザでは機能しますが、Firefoxではうまく機能しません。奇妙なことは、それは単なる背景色です。 inverse buttonのような他のクラス（色付きのテキストで白いボタンを作っています）は意図どおりに動作します。 Firefoxにこれを引き起こす奇妙な機能やサポートされていない機能はありますか？最も重要なことは、これはどのように修正するのですか？

また、I tried minimizing the code furtherが、この奇妙な振る舞いをレプリケートできませんでした。

出典

2016-06-21 Ben Leggiero

私の質問は便利、不明瞭ではない、または不十分に研究、私は再び同じミスをしない理由を私に言ったコメントを持つ任意のdownvotesに同行してください。 –

visual_Clean_Purple.phpの33行目のルールは、FirefoxでCSSを改ざんしています。削除してください：

*::selection,

BoltClockはthis answerで良い説明を提供しています：

Firefoxは、単純に（それゆえがベンダー接頭辞::必要 - MOZ-選択）::選択を理解していないように見えるので、仕様ごとに認識できないセレクタが発生した場合には、ルール全体が無視されます（）。

グループ内の1つのまたは複数の セレクタを理解していないブラウザのための共通の問題を回避するには、ルールセットを複製/分割することです。

...実際には

が、この場合には、すなわちあなたが肥大化のこのわずかなビットを我慢する必要があります、あなたが行うことができる唯一のことです。

出典

2016-06-21 03:49:47 billynoah

ああ、私は見る！今度は接頭辞が必要です。 –

はい、私はここでも何か新しいことを学びました。ありがとう – billynoah

あなたは解釈されるからCSSセレクタを停止visual_Clean_Purple.phpでFirefoxはまだサポートされていないことをCSSセレクタ（）を使用しています。

私はそのセレクタを削除し、それが動作します：https://plnkr.co/edit/d0eXisEaAqwvmF4cZL5f?p=preview

出典

2016-06-21 03:52:14

なぜこのページはChromeでは紫色ですが、Firefoxでは青色ですか？

答えて

関連する問題