0

我最近发现了一个程序 IETester，可以在不同版本的 Internet Explorer 上测试我的网站http://www.gfcf14greendream.com/ 。在 chrome 和 firefox 上，我的网站如下所示：注意悬停时展开的垂直菜单

但是当我在 IE8 上打开我的网站时，我得到了这个错误：在此处输入图像描述

greedream.js 文件的行是：document.getElementById("log").innerHTML = data;来自函数：

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

它会加载带有您在右侧文本区域（即“站点日志”）中看到的信息的文本文件。无论如何，该网站看起来并不好：

在此处输入图像描述

菜单、日志和标题是否因为在<object>标签内而无法很好地显示？我使用它们从不同的 html 文件中加载这两个：

这个作为标题，<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 上打开我的网站，它几乎可以正常显示，但垂直菜单在悬停时不会展开，并且网站日志仅加载文本文件的前两行：

在此处输入图像描述

当我通过 Internet Explorer 10 运行它时（我已经安装了它，但由于某种原因它在 IETester 中显示为灰色），日志加载良好，背景加载良好，但是当鼠标移动时垂直菜单仍然没有展开盘旋在里面。请如果有人可以帮助我调整我的网站，我将非常感激！

4

2 回答 2

0

首先，我建议访问http://modern.ie并下载一个免费的 IE 8 虚拟机在本地运行，或者只使用 IE 中内置的向后兼容工具作为 IE 8 运行。

接下来使用内置调试器为您的问题设置断点并从那里进行调试。您可能正在访问 DOM 属性或使用在 2008 年末还不是标准的 JavaScript，您需要进行一些功能检测以使其与 IE 8 兼容。

此外，当您在modern.ie 上时，通过站点扫描工具运行您的站点，以查找您的站点可能与现代Web 标准存在的其他潜在兼容性问题。您只需将网址粘贴到搜索栏中即可使用扫描工具。

于 2013-12-03T21:53:50.383 回答
0

也许你应该检查你的 jQuery 版本。jQuery 2.0 或 2.x 不支持 IE8 和更早版本，jQuery 1.9 和 1.x 系列将始终支持 IE6/7/8，直到这些旧 IE 仍然是因素。

于 2014-02-05T11:29:28.440 回答