Internet Explorer与我站点上的版本兼容
我最近发现了一个程序，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
}
sitelog仅使用此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中显示为灰色），日志加载良好，后台加载良好，但垂直菜单仍然不会扩展鼠标在里面盘旋。如果有人能帮助我调整我的网站，我会非常感激!!
2 个答案:
答案 0 :(得分：0)
首先，我建议访问http://modern.ie并下载IE 8的免费虚拟机以在本地运行，或者只使用IE中内置的向后兼容工具以IE 8运行。
接下来使用内置调试器为您的问题设置断点并从那里进行调试。您可能正在访问DOM属性或使用2008年末不是标准的JavaScript，您需要进行一些功能检测才能使其与IE 8兼容。
此外，当您使用现代网站时，您可以通过网站扫描工具运行您的网站，以查找您的网站可能与现代网络标准相关的其他潜在兼容性问题。您只需将网址粘贴到搜索栏即可使用扫描工具。
答案 1 :(得分：0)
也许你应该检查一下jQuery版本。 jQuery 2.0或2.x不支持IE8和之前的版本，jQuery 1.9和1.x系列将始终支持IE6 / 7/8，直到这些旧的IE仍然是因素。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？