3

HTML と CSS を使用してブログにドロップダウン メニュー バーを追加しています。

コードはMy Blogger Labからのもので、色などに微調整が加えられています。

私のテスト サイト: http://practicedailygratitude.blogspot.com/

Chrome と Firefox での表示には 100% 満足しています (ドロップ ダウンは、実際には About、Images、Home DIY のみです。残りは単なるリンクです)。

IE で次の問題が発生しています (7、8、および 64 ビットを試しました)。

  1. エクスプローラーでは、ドロップダウンがほぼ透明な背景で表示されます (投稿のテキストが背後に表示されます)。
  2. エクスプローラーでは、ドロップ ダウンが非常に速く発生するため、カーソルを合わせたり選択したりすることができません。
  3. Safari では、リンクはアクティブではなく、ホバー時にドロップダウンが表示されます。

私は2週間検索し、他の投稿からさまざまな調整と提案を試みましたが、IEで機能させる方法がわかりません.

私は IE を使用していませんが、彼女のブログのフォロワーの 30% 以上が使用しているため、調整が必要です。この時点で、私はまったくアイデアがありません (そして、自分の能力に到達しました)。

Chrome と Firefox でコードを調整して、(ヘッダーのフラグ バナーの上にドロップダウンを置いて) 希望どおりに正確に取得することができました。

注: このコードでは、ヘッダーではなく、ブログ投稿セクションの上部に HTML ガジェットを配置する必要があります。そのため、マージンなどを変更して、ドロップダウンが移動し、ヘッダーで「正しく見える」ようにしました。その後ろの画像。

これが私が見ているものです：

ここに画像の説明を入力

テーマは Josh Peterson の Blogger の SIMPLE です。これは Blogger の数少ない選択肢の 1 つです ---- 私は変更していません。投稿セクションの上に追加した 1 つの html ウィジェットのみを変更しています。テンプレート用の高度な CSS タブがあります ---- ここで [高度な設定] に移動し、[CSS を追加] して My Blogger Lab から CSS を追加しました。 (ヘッダーに重なるように色を更新して移動するだけです) ---- CSS が SIMPLE テンプレートに自身を追加するようです。

ウィジェットの html: http://practicedailygratitude.blogspot.com/2012/09/my-blogger-lab-html-code-for-widget.html

CSS: http://practicedailygratitude.blogspot.com/2012/09/my-blogger-labs-css-i-modified-for.html

Blogger のシンプルなテンプレート http://practicedailygratitude.blogspot.com/2012/10/simple-template-from-blogger.html

4

1 に答える 1

1

私はあなたのコードを見ましたが、最初にクリーンアップする必要があります。クリーンアップとは、マークアップの構文エラーを意味します。

ここには、発生している問題を引き起こしている可能性のあるエラーがかなりあります。

クリーンアップ後も問題が解決しない場合は、IE7 の通常の z-index の問題として対処する必要があります。これは、メニューを含むすべての親要素に配置するposition: relative;と解決できます。z-index: 500;それでは、ルールとルールを追加してdivください。メニューの値は であるため、その親にもそのルールの値が定義されている必要があります。これは、子要素 (この場合はメニュー) と同じかそれ以上である必要があります。これにより、メニューがコンテンツの背後にあるという問題が解決されます (サイトの現在の状態で既にテスト済みです)。divpositionz-indexz-index500

ちなみに、あなたのページには次のタグが宣言されています: <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>. これにより、IE7 互換モードを使用して Internet Explorer 8+ がページをレンダリングするように強制されます。このタグを削除してほしいと思います。

これがあなたを助けたかどうか教えてください。

于 2012-10-02T11:11:57.850 に答える