[一部]は、最近のFirefoxに遭遇したピットのピットを強化しました

作業の年以上のために、仕事をして、基本的なのでwebkit、家族に対処します。

まず、2メートルの駅を行い、後に作られたapp組み込みのhybridプロジェクト、決してのみを考慮しないwebkitプレフィックスと関連する擬似クラスを。

最近のスタイルを書いて、それ以上の内部管理体制の4ヶ月より開始した、と時折あることをcalendartreeコンポーネントと同様に、すべての基本は、新しいバージョンを検討しますChrome他の問題を検討することはありません。

最近、人々が解決を支援firefox下に互換性の問題のいくつかを。QA姉妹紙が束を提出しました“bug”Bug人のリストは、頭痛を見て、少し有罪。おっと。

ステップバイステップでは、最初のコンソールを開きます。いくつかの研究と多くのことを発見し“bug”たスタイルの問題では、互換性のあるスクリプトがうまく行っていないではありません。

ここではいくつかの最近発見された下の内訳だbugメモであると考えられては、。その後、まだああに注意を払わなければなりません。

A)まだ使用-Xバックグラウンド位置

以前、一部のCSS仕様を読んで、繰り返し使用しないように強調しbackground-position-xプロパティをなど。

BaiduはFEX指摘しました:

4.6 2D位置
[力]は同時に水平および垂直方向の位置を与えられなければなりません。

/* good */
body {
    background-position: center top; /* 50% 0% */
}

/* bad */
body {
    background-position: top; /* 50% 0% */
}

これは、この規則を遵守してきましたが、理由のには触れませんでした。

この時点までは、実際に我々は問題を抱えています。コンソールだけに私がいることを発見し、以下がある中!background-position-xFirefox**无效**

B)ねえ、もののためにまだ入力テキストボックスを検証するために始めていないが赤色になっていますか?

2番目の質問。

パスワードを変更するためのプロジェクトを形成します。検証は、赤枠での入力ボックスが渡されていません。

その後、QA姉妹紙は、説明の中で述べています:

firefoxブラウザ、入力ボックスに任意の文字を入力しないでください、あなたのパスワードページを変更、入力ボックスの色は赤です

私は、JSはまだ書かれていないところ、それは思いました。長い時間を探して、私はスタイルから始めることにしました。

Firefoxツールパネルをデバッグ、それだけでスタイルシートのスタイルを示していますようです。ブラウザのデフォルトスタイルは、それを見つけるのは困難です。私は少しを試すことができます。

最後に、我々が見つかりました。input入力ボックスが持ってきたようだrequiredプロパティを。これは、HTML5表現形式要素は属性を必要な場合。ここでの問題だろうか?このプロパティを削除しようと、それは本当に解決しました。

実際には、この赤枠は、ないですborderけど、box-shadowああ。

最後の解決策は、これと一緒に取得することですCSS

input:required:invalid {
    box-shadow: none;
}

C)私は、こするはっきりと書かれてoutline: 0 ますが、自然と卵ああ

QA姉妹紙にも反映して、ログイン、登録、および他のボタンビューは、にFirefoxどのように後にクリックすると、黒枠がああ見えるのだろうか?

何?知らないフロントバディ子でコードを書いている:active:focus状況劣る書くoutline:0ああ?この非科学的。

だから、魔法の探査(GU)ケーブル(GE)の旅が始まりました。

今回はその答えはそれが本当に黒の細い線ではないということですoutlineこれは奇妙な疑似クラスです::-moz-focus-inner単にキーボード上Kusi。

だから、問題を解決するために、次のコード:

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border-color: transparent;
}

最後に、いくつかの他の

つづく...

おすすめ

転載: www.cnblogs.com/10manongit/p/12650603.html