[落とし穴] 最近 Firefox で遭遇したいくつかの落とし穴_html/css_WEB-ITnose

というのは、私が 1 年以上働いているので、私が行った仕事は基本的に Webkit シリーズを扱っているからです。

最初に m ステーションを作成し、次にアプリに埋め込まれた 2 つのハイブリッド プロジェクトを作成しました。常に Webkit プレフィックスと関連する疑似クラスのみを考慮していました。

ここ 4 か月間、内部管理システム、書き方、そして時々カレンダーやツリーなどのコンポーネントの作成に取り組み始めました。基本的には、新しいバージョンの Chrome についてのみ検討しています。それ以外のことは決して考慮しませんでした。

最近、私は人々が Firefox での互換性の問題を解決できるよう支援しています。 QA ガールが大量の「バグ」を提出しました。バグのリストを見ると、人々は頭が痛くなり、少し罪悪感を感じます。おっと。

手順を追って、まずコンソールを開きます。いくつか調査した結果、多くの「バグ」はスクリプトの互換性が悪いのではなく、スタイルの問題であることがわかりました。

備忘録として、最近発見されたバグのいくつかを分析してみましょう。今後も引き続き注意が必要だ。

1) まだ background-position-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% */}

私は常にこのルールを守ってきましたが、その理由については掘り下げませんでした。

今回まで、私は本当に問題に遭遇しました。 Firefox では、background-position-x が **無効** であることをコンソールで発見しました。 ！ ！

2) テキスト ボックスに入力を始める前に、認証が赤くなったのはなぜですか?

2番目の質問。

プロジェクトにはパスワードを変更するためのフォームがあります。検証が失敗した場合、入力ボックスには赤い枠が表示されます。

その後、QAの女の子が説明で言ったことは次のとおりです:

Firefoxブラウザでは、パスワード変更ページで、入力ボックスに文字が入力されず、入力ボックスの色も赤です

私はそう思いましたそれは違うjsによって書かれました。長い間探した結果、スタイルから始めることにしました。

Firefoxのデバッグツールパネルでは、スタイルシート内のスタイルのみが一覧表示されるようです。ブラウザのデフォルト スタイルの値を見つけるのは困難です。少ししか実験できません。

最後に、input 入力ボックスには必須属性があるらしいことがわかりました。これは、HTML5 のフォーム要素の必須属性です。これが問題なのでしょうか?この属性を削除してみましたが、問題は解決しました。

実際、この赤い境界線は境界線ではなく、ボックスシャドウです。

最終的な解決策は、次の CSS を追加することでした:

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

3) それを消去して、アウトライン: 0 を明確に書きましたが、機能しませんでした

QA ガールは、ログイン、登録、その他のビューのさまざまなボタンも報告しました。 , Firefox でクリックすると黒い枠線が表示されるのはなぜですか?

何？コードを書くフロントエンド担当者は、:active、:focus などの状態で、outline:0 を記述する方法を知りませんか?これは非科学的です。

こうして、魔法のような探検の旅（gu）が再び始まりました。

今回得られた答えは、この細い黒い線は実際には輪郭ではないということです。これは奇妙な疑似クラス、::-moz-focus-inner です。私は文字通りキーボードの上で死ぬほど泣きました。

それで、次のコードは問題を解決します:

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;}

最後に、他にもいくつかの問題があります

clipboardData のスクリーンショットと貼り付けに関するその他の問題については、Chrome と Firefox の実践の下にある前のコラム [Web ページのスクリーンショット データを取得する] を参照してください。経験;

当時コメントに書いて忘れていたものもいくつかあります。 。

続きます…