0

私は最近、さまざまなバージョンの Internet Explorer で私の Web サイトhttp://www.gfcf14greendream.com/をテストするプログラム IETester について知りました。Chrome と Firefox では、私のサイトは次のようになります。ホバリングすると展開する垂直メニューに注意してください

しかし、IE8 で Web サイトを開くと、次のエラーが表示されます。ここに画像の説明を入力

greedream.js ファイルの行は次のとおりです。document.getElementById("log").innerHTML = data;関数から:

function loadLog() {
    $.get("/PHP/loadlog.php", function(data) {
        document.getElementById("log").innerHTML = data;
    });
}

これにより、右側のテキスト領域に表示される情報 (「サイト ログ」) を含むテキスト ファイルが読み込まれます。いずれにせよ、このサイトは見栄えがよくありません。

ここに画像の説明を入力

<object>メニューやログ、ヘッダーがタグ内なのでうまく表示されないということでしょうか？それらを使用して、異なる html ファイルからこれら 2 つをロードします。

これはヘッダー用で、<object type="text/html" data="http://www.gfcf14greendream.com/header.html" width="100%" height=185></object>

メニューはこちら、<object type="text/html" data="http://www.gfcf14greendream.com/verticalmenu.html" height=484 width=100%></object>

これはログ用で、<center><object type="text/html" data="http://www.gfcf14greendream.com/thesitelog.html" height=600 width="90%"></object></center>

CSS がブラウザー バージョンに対して高度すぎるということでしょうか? ご覧のとおり、背景は引き伸ばされておらず、空白も残されています。

この HTML コードを背景に使用し、

<div id="background">
    <img src="http://www.gfcf14greendream.com/images/greentwi.png" class="stretch" alt="" />
  </div>

これがストレッチクラスです

.stretch 
{
    width:100%;
    height:100%;
}

メニューには、このコードを使用します。

<div id="verticalmenu" style="display: table; padding-left: 50px; position: absolute; z-index: 999;" onmouseover="window.parent.stretch()"; onmouseout="window.parent.shrink();">
            <ul id="nav" class="toplevel">
               <li><a href="http://www.gfcf14greendream.com/programs.html" target="_parent" class="sublevel">Programs</a>
                  <ul>
                     <li><a href="http://www.gfcf14greendream.com/smssender.html" target="_parent">SMSSender</a></li>
                     <li><a href="http://www.gfcf14greendream.com/employmentassistant.html" target="_parent">EmploymentAssistant</a></li>
                     <li><a href="http://www.gfcf14greendream.com/typingtest.html" target="_parent">TypingTest</a></li>
                  </ul>
               </li>
               <li><a href="http://www.gfcf14greendream.com/games.html" target="_parent" class="sublevel">Games</a>
                  <ul>
                     <li><a href="http://www.gfcf14greendream.com/games/votebuster.html" target="_parent"> VoteBuster</a></li>
                  </ul>
               </li>
               <li><a href="http://www.gfcf14greendream.com/tutorials.html" target="_parent" class="sublevel">Tutorials</a>
                  <ul class="toplevel">
                     <li><a href="http://www.gfcf14greendream.com/tutorials/javatutorials.html" target="_parent" class="sublevel">Java</a>
                        <ul class="toplevel">
                           <li><a href="#" class="sublevel">Before Anything</a>
                              <ul>
                                 <li><a href="http://www.gfcf14greendream.com/tutorials/javatutorials/javahistory.html" target="_parent">History</a></li>
                                 <li><a href="http://www.gfcf14greendream.com/tutorials/javatutorials/javastructure.html" target="_parent">Structure</a></li>
                              </ul>
                           </li>
                           <li><a href="#">Beginning</a></li>
                           <li><a href="#">Intermediate</a></li>
                           <li><a href="#">Advanced</a></li>
                           <li><a href="#">Tests</a></li>
                        </ul>
                     </li>
                     <li><a href="http://www.gfcf14greendream.com/tutorials/csharptutorials.html" target="_parent">C#</a>
                        <ul class="toplevel">
                           <li><a href="#" class="sublevel">Before Anything</a>
                              <ul>
                                 <li><a href="http://www.gfcf14greendream.com/tutorials/csharptutorials/csharphistory.html" target="_parent">History</a></li>
                                 <li><a href="#">Structure</a></li>
                              </ul>
                           </li>
                           <li><a href="#">Beginning</a></li>
                           <li><a href="#">Intermediate</a></li>
                           <li><a href="#">Advanced</a></li>
                           <li><a href="#">Tests</a></li>
                        </ul>
                     </li>
                     <li><a href="http://www.gfcf14greendream.com/tutorials/cpptutorials.html" target="_parent">C++</a>
                        <ul class="toplevel">
                           <li><a href="#" class="sublevel">Before Anything</a>
                              <ul>
                                 <li><a href="http://www.gfcf14greendream.com/tutorials/cpptutorials/cpphistory.html" target="_parent">History</a></li>
                                 <li><a href="http://www.gfcf14greendream.com/tutorials/cpptutorials/cppstructure.html" target="_parent">Structure</a></li>
                              </ul>
                           </li>
                           <li><a href="#">Beginning</a></li>
                           <li><a href="#">Intermediate</a></li>
                           <li><a href="#">Advanced</a></li>
                           <li><a href="#">Tests</a></li>
                        </ul>
                     </li>
                     <li><a href="http://www.gfcf14greendream.com/tutorials/vbdotnettutorials.html" target="_parent">VB.NET</a>
                        <ul class="toplevel">
                           <li><a href="#" class="sublevel">Before Anything</a>
                              <ul>
                                 <li><a href="http://www.gfcf14greendream.com/tutorials/vbdotnettutorials/vbdotnethistory.html" target="_parent">History</a></li>
                                 <li><a href="#">Structure</a></li>
                              </ul>
                           </li>
                           <li><a href="#">Beginning</a></li>
                           <li><a href="#">Intermediate</a></li>
                           <li><a href="#">Advanced</a></li>
                           <li><a href="#">Tests</a></li>
                        </ul>
                     </li>
                     <li><a href="http://www.gfcf14greendream.com/tutorials/html5tutorials.html" target="_parent">HTML</a>
                        <ul class="toplevel">
                           <li><a href="#" class="sublevel">Before Anything</a>
                              <ul>
                                 <li><a href="http://www.gfcf14greendream.com/tutorials/html5tutorials/html5history.html" target="_parent">History</a></li>
                                 <li><a href="http://www.gfcf14greendream.com/tutorials/html5tutorials/html5structure.html" target="_parent">Structure</a></li>
                              </ul>
                           </li>
                           <li><a href="#">Beginning</a></li>
                           <li><a href="#">Intermediate</a></li>
                           <li><a href="#">Advanced</a></li>
                           <li><a href="#">Tests</a></li>
                        </ul>
                     </li>
                     <li><a href="http://www.gfcf14greendream.com/tutorials/fortran95tutorials.html" target="_parent">Fortran 95</a>
                        <ul class="toplevel">
                           <li><a href="#" class="sublevel">Before Anything</a>
                              <ul>
                                 <li><a href="http://www.gfcf14greendream.com/tutorials/fortran95tutorials/fortran95history.html" target="_parent">History</a></li>
                                 <li><a href="#">Structure</a></li>
                              </ul>
                           </li>
                           <li><a href="#">Beginning</a></li>
                           <li><a href="#">Intermediate</a></li>
                           <li><a href="#">Advanced</a></li>
                           <li><a href="#">Tests</a></li>
                        </ul>
                     </li>
                  </ul>
               </li>
               <li><a href="http://blog.gfcf14greendream.com/" target="_parent">Blog</a></li>
               <li><a href="http://www.gfcf14greendream.com/aboutme.html" target="_parent">About Me</a></li>
               <li><a href="#" onclick='messageMe();'>Message Me</a></li>
               <li><a href="http://www.gfcf14greendream.com/friendsites.html" target="_parent">My Friends</a>
                    <ul>
                      <li><a href="http://sniktasoftware.webs.com/" target="_parent">Snitka Software</a></li>                     
                    </ul>
               </li>
            </ul>
        </div>

そして、これが使用するすべての CSS です。

ul#nav ,
    ul#nav ul {
     border-bottom: black 1px solid;
     list-style-type: none;
     margin: 0px;
     list-style-image: none;
     border-right: black 1px solid;
     padding: 0px
    }

    ul#nav li {
     position: relative;
     list-style-type: none;
     margin: auto;
     list-style-image: none;
     padding: 0px
    }

    ul#nav li li {
     width: auto;
     float: none
    }

    #nav a {
     border-top: 1px solid #003200;
     background: #003200;
     background: -webkit-gradient(linear, left top, left bottom, from(#003200), to(#00c800));
     background: -webkit-linear-gradient(top, #003200, #00c800);
     background: -moz-linear-gradient(top, #003200, #00c800);
     background: -ms-linear-gradient(top, #003200, #00c800);
     background: -o-linear-gradient(top, #003200, #00c800); 

     text-align: left;
     border-left: black 1px solid;
     display: block;
     font-family: Serif;
     white-space: nowrap;
     color: #ffffff;
     font-size: 12pt;
     border-top: black 1px solid;
     text-decoration: none;
     text-align: center;
     padding: 5px    

    }

    #nav a:focus {
     outline-style: none;
     outline-color: invert;
     outline-width: medium
    }

    //#nav a.no-click {cursor: default}

    #nav > li > a ,
    #nav > li > a.sublevel {padding-right: 4px}

    .toplevel#nav > li > a ,
    #nav ul.toplevel > li > a {padding-right: 11px}

    #nav li a.sublevel ,
    #nav > li > a.sublevel {
     background-repeat: no-repeat;
     background-position: right 50%
    }

    #nav li:hover > a {
     background: #00ff00;
     color: white
    }

    #nav li ul ,
    #nav li:hover ul ul ,
    #nav li:hover ul ul ul ,
    #nav li:hover ul ul ul ul ,
    #nav li:hover ul ul ul ul ul ,
    #nav li:hover ul ul ul ul ul ul ,
    #nav li:hover ul ul ul ul ul ul ul ,
    #nav li:hover ul ul ul ul ul ul ul ul ,
    #nav li:hover ul ul ul ul ul ul ul ul ul ,
    #nav li:hover ul ul ul ul ul ul ul ul ul ul ,
    #nav li:hover ul ul ul ul ul ul ul ul ul ul ul ,
    #nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ,
    #nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ,
    #nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
    #nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
    #nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
    #nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
    #nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
    #nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
    #nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
    #nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {
     z-index: 999;
     position: absolute;
     display: none
    }

    #nav li:hover ul ,
    #nav li li:hover ul ,
    #nav li li li:hover ul ,
    #nav li li li li:hover ul ,
    #nav li li li li li:hover ul ,
    #nav li li li li li li:hover ul ,
    #nav li li li li li li li:hover ul ,
    #nav li li li li li li li li:hover ul ,
    #nav li li li li li li li li li:hover ul ,
    #nav li li li li li li li li li li:hover ul ,
    #nav li li li li li li li li li li li:hover ul ,
    #nav li li li li li li li li li li li li:hover ul ,
    #nav li li li li li li li li li li li li li:hover ul ,
    #nav li li li li li li li li li li li li li li:hover ul ,
    #nav li li li li li li li li li li li li li li li:hover ul ,
    #nav li li li li li li li li li li li li li li li li:hover ul ,
    #nav li li li li li li li li li li li li li li li li li:hover ul ,
    #nav li li li li li li li li li li li li li li li li li li:hover ul ,
    #nav li li li li li li li li li li li li li li li li li li li:hover ul ,
    #nav li li li li li li li li li li li li li li li li li li li li:hover ul ,
    #nav li li li li li li li li li li li li li li li li li li li li li:hover ul {
     display: block;
     margin-left: 100%
    }

    #nav ul ul {margin-left: 0px}

    #nav ul {
     top: 0px;
     left: 0px
    }

サイトログはこの HTML コードのみを使用しており、

<body onLoad="loadLog();">          
        <div style="text-align: center"><b><font color="#00ff00">SITE LOG</b></div>
        <br>
        <div style="text-align: center;"><textarea rows=30 cols=20 id="log" readonly class="log"></textarea></div>
    </body>

そしてこのCSS：

.log
{
    background-color: #000000;
    border: 2px solid #00ff00;
    padding: 5px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    color: #00ff00;
    font-size: 10px;
}

ここで、IE9 でサイトを開くと、ホバー時に垂直メニューが展開されず、サイト ログがテキスト ファイルの最初の 2 行のみをロードすることを除いて、ほとんど問題なく表示されます。

ここに画像の説明を入力

Internet Explorer 10 で実行すると (インストール済みですが、何らかの理由で IETester でグレー表示されています)、ログは適切に読み込まれ、バックグラウンドも適切に読み込まれますが、マウスを使用しても垂直メニューは展開されません。中でホバリングしました。誰かが私のサイトを適応させるのを手伝ってくれたら、本当に感謝します!!

4

2 に答える 2

0

jQuery のバージョンを確認する必要があるかもしれません。jQuery 2.0 または 2.x は IE8 以前をサポートしていません。jQuery 1.9 および 1.x シリーズは、これらの古い IE がまだ有効になるまで、常に IE6/7/8 をサポートします。

于 2014-02-05T11:29:28.440 に答える
0

まず、http://modern.ieにアクセスして、IE 8 用の無料の仮想マシンをダウンロードしてローカルで実行するか、IE に組み込まれている下位互換性ツールを使用して IE 8 として実行することをお勧めします。

次に、組み込みのデバッガーを使用して問題にブレークポイントを設定し、そこからデバッグします。DOM プロパティにアクセスしたり、2008 年後半には標準ではなかった JavaScript を使用している可能性があり、IE 8 と互換性を持たせるために何らかの機能検出を行う必要があります。

また、modern.ie を使用している間に、サイト スキャン ツールを使用してサイトを実行し、最新の Web 標準との互換性に関する他の潜在的な問題を見つけてください。検索バーに URL を貼り付けるだけで、スキャン ツールを使用できます。

于 2013-12-03T21:53:50.383 に答える