0

これが私がハッキングしている Blogger テンプレートの問題なのか、単純な CSS プロパティを忘れているだけなのかはわかりません。

私は友人のテンプレートに取り組んでおり、メニューバーの div の右上にロゴを表示しようとしています。Firefox と Chrome では問題なく動作しますが、IE9 では div の背後にレンダリングされます。

デモへのリンクは次のとおりです: デモ ブログ

基本的に、私が行ったことは、内側の画像を含む絶対配置の div を作成することです。

<div id="logo2">
  <a href="">
    <img border="0" src="http://1.bp.blogspot.com/-lpZjzviYzAo/T7mNUvXY6QI/AAAAAAAAAcM/XwQS-bO0Hy4/s1600/lovek-hdr.png">
  </a>
</div>

および関連する CSS:

#logo2 {
  position:absolute;
  top: -25px;
  right: -50px;
  z-index: 999;
}

絶対位置と高い Z インデックスを組み合わせることで、IE の z インデックスの処理に関する問題を解決できると思っていましたが、それは間違いでした。

また、メニューバー div の位置 (相対) と z-index (1) を追加しようとしましたが、役に立ちませんでした。

@Dubious' の提案に従って、以下を追加しましたが成功しませんでした (画像はまだ切り取られています)。

.tabs-outer, .tabs-inner {
    <!-- [if ie 9]>
      z-index: -1;
    <![endif]>
    position: relative;
}
4

1 に答える 1

3

古い回答「メニューバーの div に 1 ではなく -1 の z-index を追加してみてください」

編集：

さて、IE9 開発者ツールをいじった後、ソース コードが IE にドキュメント モード: IE7 標準でページをレンダリングするように指示していることに気付きました。ご覧のとおり、開発ツールを開いた後 (および開発ツール フレームがアクティブであることを確認した後)、alt + 9 を押して、IE9 でレンダリングする必要がある css をレンダリングできます。これが発生した後、コンテンツは現在のブラウザで表示されるように表示されます。

では、なぜページが IE7 Document Standards で読み込まれるのでしょうか? ページごとに、標準に準拠した正しい !DOCTYPE ディレクティブを使用する必要があります。これを行うには、このページを読み、html ファイルが最初の例に従っていることを確認してください。

条件付きコメント

IE の条件付きコメントのより良い例を示すべきだったので、ここでもう少し詳しく説明します。<!-->IE 条件付きコメントは、html 固有のコードを使用するため、html でのみ定義できます。したがって、ie7/ie9/ie 固有の css を追加するには<link>、ie 固有のコードを持つコメント フィールド内に新しいスタイルシートが必要になります。さらに読むここ. また、発生しているこの問題は、ページが IE7 quirks モードの css をレンダリングしているためであるため、ie9 ではなく ie7 コメントを使用する必要がある場合があることに注意してください。

これで問題が解決することを本当に願っています。頑張ってください!

于 2012-08-08T01:18:12.617 に答える