0

こんにちは、IE 10 互換表示のサイトで問題が発生しています (IE7 表示でも同じ問題です)。元々、サイドバーの後ろに .info-bg という背景の div があり、position: absolute を使用して、サイドバーの .info-area の後ろに隠すことを想定しています。しかし、IE7では背景が隠れていないように見えます。非表示にする唯一の方法は、空の場所を残す position: static を使用することです。背景を完全に非表示にする（表示なしなど）オプションはありません。下にスクロールすると右側にコンテンツが読み込まれるためです。.info-bg がないと、左側に空白が返されます。ライブ サイト リンク

これは私が使用するときです position: absolute これは私が使用するときです position: static

4

4 に答える 4

1

マイケルサビドの答えは有効ですが、問題の半分しかカバーしていません。IE7 としてレンダリングしているときに IE10 をサポートしても意味がありません。したがって、これを行う人はほとんどいません (私の統計は、ユーザー エージェントではなく JavaScript/DOM オブジェクトの検出に基づいているため、非常に信頼性が高く、レンダリング モードを強制的にオーバーライドしようとすると、私のサイトはエラー 9999 をトリガーします) IE10 を気にしないでください。 IE7としてレンダリング。ただし、IE7 をテストするには、XP のコピーを仮想マシンに保持する必要があります。

そうは言っても、Microsoft は IE7 をクリーンアップするために非常に小さな更新を行いましたが、まだ多くの問題があります。Internet Explorer の条件付きコメント スタイル シートを使用することをお勧めします。こちらのサイトで実装方法に関する完全なチュートリアルがあります...

http://www.jabcreations.com/web/css/ieccss

IE7 用の IECCSS を実装したら、ハックを使用する必要はありません。IE7 用に配置するだけです。

あなたのページ レイアウトは、CSS レベル 2 の配置がまったく必要ないように見えます。IE 5.0 でさえ、基本的なレイアウトを正しく行う方法を知っていれば、立派な CSS レベル 1 をサポートしていpositionますfloat。したがって、一般的にはるかに安定した CSS が必要で、SEO の目的で配置を制限する場合は、CSS レベル 1 のチュートリアルもここで読むことをお勧めします...

http://www.jabcreations.com/web/css/nested-divisible-elements

これを行うと、CSS レベル 2 を使用する必要性が制限されますposition。あなたのレイアウトでは、私が位置を使用していた唯一のことは、コンテンツをbody要素の上部に保持し、メニューをコードのコンテンツの下に配置することです...そしてposition、メニューをページ上の場所に視覚的に配置するために使用します. CSS を無効にすると (たとえば、Firefox の Web 開発者ツールバーや Firefox --> 表示 [メニュー] --> ページ スタイル [メニュー] --> スタイルなし)を無効にすると、検索エンジンはページを認識します。

また、ヘッダー要素を修正する必要があります。あなたは2つh4、そしていくつかのh2要素を持っています。あなたは自分のページを新聞のように考えたいと思っています。あなたのページは現在、戦争に勝つことについて何も書いていませんh1が、トップページの最も重要な記事はh4、老人ホームの木から猫を救うことです。HTML のセマンティクスを理解することは、検索エンジンと組み合わせることで、より多くの人にサイトを見つけてもらうための強力なツールになります。検索エンジンがコンテンツのセマンティクスを理解しやすくなるためです。

これがお役に立てば幸いです。他にご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-09-18T07:23:02.873 に答える
0

スタイルルール position:relative to wraper id main-wrap like を追加

#main-wrap{
    position:relative;
}

次の CSS を「.info-bg」div に追加します。

.info-bg{
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    bottom: 0;
    height: 600px; /* change according to your need */
    box-shadow: 0 0 73px rgba(0, 0, 0, 0.15) inset, 4px 0 4px rgba(0, 0, 0, 0.08);  
}

さらに、このページをチェックして、z-index プロパティが実際にどのように機能するかを確認できます - http://www.tutorialrepublic.com/css-tutorial/css-layers.php

于 2013-09-18T05:56:13.363 に答える
0

強調表示した問題を IE7 で修正しました。しかし、この要点https://gist.github.com/anonymous/6607075を見て、あなたの側で試してください。

私はあなたのWordpressのテーマを持っていないので、私の側で修正するのはかなり難しい.

とにかく、要点に関して（https://gist.github.com/anonymous/6607075）

  • CSS については、108 行目のコードを見てください。#info-wrapper
  • html の 94 行目に、<div id="info-wrapper">

これで問題が解決するかどうか確認してください。そうでない場合は、コメントでお知らせください。

--

編集: 私が IE7 でテストしたファイルは、wetransfer からダウンロードできます。

于 2013-09-18T10:10:26.043 に答える