私はこの問題に何度も遭遇したので、よりスマートなアプローチを見つけたいと思っています。シナリオは、Web アプリに変更を加えたところ、ページ上の要素が以前とは異なって見えてしまい、その理由がわからないというものです。マークアップと css をリファクタリングしたため、またはページに新しい css インクルードを追加したため、またはその他の理由による場合があります。
CSS がほとんど同じように見える場合があるため、どの CSS ルールが適用されているかについて、ブラウザー開発ツールで精巧な検索を行う必要があります。Chrome の開発ツールの「プロパティ」セクションで原因が見つからない場合は、「Computed Style」セクションを調べます。それでも違いを見つけるのに苦労することがあるので、壊れたバージョンと動作中のバージョンの「Computed Style」セクションをテキスト ファイルに貼り付け、ディスクに保存してから 2 つを比較します。壊れたバージョンの要素が祖先要素から異なる行の高さを継承したように、最終的にはイライラするものになります。
これを行う簡単な方法はありますか？