3

ナビゲーションにドロップダウン メニューがあるボタンに、ある種のアイコンまたはインジケータを追加することについて質問があります。メニューは、マイナーな例外を除いて、すべてのブラウザーで適切に表示されます。メニュー自体は Ektron CMS に組み込まれています。ナビゲーションには 7 つのボタンがあり、そのうちの 5 つにはドロップダウン メニューがあります。私のサイトでわかるように、ドロップダウンがあるものを示す小さな右矢印があります。矢印は Unicode 文字であり、CMS のメニュー コントロールに追加するとうまくいきました。結果にはかなり満足していますが、それがアイコンを作成する最良の方法であったかどうかはわかりません.

このタイプのインジケーターを作成するためのより良い、またはより効率的な方法はありますか? サブメニューが存在する場合にのみシンボルまたはアイコンを割り当てる JavaScript の方法はありますか?

私のソリューションは機能しますが、解決できない問題が 1 つあります。IE7+、Chrome、Safari では、すべてのボタンが完全に整列していました。FireFox では、ドロップダウン メニューのない 2 つのボタンは、ドロップダウンのあるボタンよりも 4px 高かった。これは、ユニコードの矢印文字を追加するとすぐに発生しました。FF の問題を修正する小さな CSS ハックを追加しましたが、Chrome で最後の 2 つのボタンが残りのボタンより 4px 低いという問題が発生しました。この問題を効率的に修正する方法がわかりません。

ここに私のサイトへのリンクがあります。あなたが提供できる助けに感謝します。

http://www.clinicaltrialsummit.com/

4

2 に答える 2

0

このスタイルを削除してみてください:

#nav li a:last-child[href="http://www.healthtech.com/press.aspx"] { 
    padding: 16px 0.4em 0 
}

デフォルトの上部のパディングは 14 ピクセルですが、上記のルールでは、特定の href を持つ最後の子に 16 ピクセルのパディングが設定されます。

あなたの jsfiddle の例では、この css ルールはありません。

UTF-8 シンボルの代わりに css 矢印を使用したり、アイコンを使用したりできますが、UTF-8 シンボルを使用しても問題ないと思います。

于 2012-11-29T15:38:58.910 に答える
0

ご返信いただきありがとうございますが、上記のスタイルは私の css ハックであることをお伝えしておくべきでした。私はそれを使用する背後にある理由を説明しようとします。

クラスを li に直接適用することなく、最後のナビゲーション ボタンを選択する方法が必要でした。メニュー自体は CMS のコントロールを使用して作成されるため、HTML マークアップは動的に生成されます。:last-child 疑似クラスを使用したくありませんでしたが、FF のみに余分な px のパディングを追加する方法も必要でした。IE が :last-child を無視することはわかっていました。ただし、Chromeにも追加されており、Safariを信じているため、失敗しました。スタイル全体を取り除くことができるので、問題をよりよく理解するのに役立つかもしれません. FF を除くすべてのブラウザーで垂直方向の配置が正しいことがわかります。

UTF-8 文字を追加するまで、全体の位置合わせは完璧でした。その時、位置がずれましたが、FFだけです。

CSS 矢印を追加するにはどうすればよいですか?

于 2012-11-29T16:20:45.433 に答える