html - eBay でドロップダウン メニューが機能しない

Question

次のドロップダウン メニューがあります: http://jsfiddle.net/McKgU/ご覧のとおり、正常に動作します。ただし、eBay に出品すると、レイアウトがあちこちに散らばっています。

Answer 1

すべての順序付けられていないリストとリスト項目をスタイリングしています。何！？ページ上の既存のスタイルに干渉しないように、セレクターを非常に具体的にする必要があります。

すべてを div でラップし、子セレクターを使用して ul と li を選択できます。

または、すでに ul#menu があるので、それを CSS で使用します。ul#menu { ... }これは、「メニュー」ID を持つ ul 要素のみをスタイルします。ページにメニューIDのULもある場合に備えて、IDをメニューからより具体的なものに変更します。

参照:セレクター

Answer 2

これを試してください：http://jsfiddle.net/McKgU/5/

私がやったこと：

1) 「メニュー」idの前に #NOINTERFERE00_ を付けます

なんで？「メニュー」は、ID/クラス/その他の名前としてかなり一般的に選択されるため、同じ名前の別の要素がページに存在する可能性が非常に高くなります。これにより、「メニュー」とページ上の ID「メニュー」を持つ他の要素との間に干渉 (css または js) がないことが保証されます。

2) 各 CSS 宣言の最後に !important を追加しました。

なんで？また、これを挿入しようとしているページの作成者が、ul、li、および a を対象とするスタイルを持っている可能性が非常に高いです。これにより、あなたのスタイルが優先されます (作成者が自分のスタイルシートで重要を使用している場合を除きます。ほとんどの場合、そうすべきではありませんが、可能性があります)。

私がしていないこと：

3) 元の作成者のスタイルシートによって適用されたすべてのスタイルを ul、li、および a にリセットします。(もっと良い方法を模索中です)

Scoped CSSは、問題 1 と 2 の両方をより洗練された方法で解決します。ただし、現時点では Chrome のみがサポートされていると思います。