我一直致力于为我大学的一位教授创建一个网站，以帮助教授基本的 php。我一直在设计它并使用 Firefox 预览它，直到现在才真正想到在 IE 中测试它，我发现它不能正确预览。 jQuery 导航在应该水平加载时垂直加载。我使用 W3C 验证器检查我的主页和 css 表中的代码，它们都检查出来了。我读过，IE 必须有一个正确的 DocType 才能加载页面，有时我认为我的页面是正确的。我在我的导航栏上使用 jquery 菜单，在我的 body 中使用 jquery Accordion 。知道为什么它们显示不正确以及为什么它们没有在页面中间居中吗？
我希望它可以在 IE 9 和任何更新版本中查看。具体来说，是否有人知道为什么此页面无法在 IE 9 中正确加载。
这是链接:http://cite.nwmissouri.edu/projects/php/
这是主页的当前代码:
<!-- Author: Drew Scott-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="images/favicon.ico"/>
<link href="css/external.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="css/jMenu.jquery.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.3.custom.min.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script src="js/accordion.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jMenu.jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP Practice</title>
<style type="text/css">
body {
height:100%;
margin: 0;
padding: 0;
background-size: 100%;
background-attachment: inherit;
background-color:#d1d1d4;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="navigation">
<ul id="jMenu">
<li>
<a href="index.html" style="text-decoration: none" class="fNiv">Home</a>
</li>
<li>
<a class="fNiv">The Basics</a>
<ul>
<li class="arrow"></li>
<li>
<a href="basics.html" style="text-decoration: none">Basics</a>
</li>
<li>
<a>Category 2.8</a>
<ul>
<li><a>Category 2.3</a></li>
</ul>
</li>
<li>
<a>Category 2.7</a>
<ul>
<li><a>Category 2.3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a class="fNiv">Installation</a>
<ul>
<li class="arrow"></li>
<li>
<a href="installApache.html" style="text-decoration: none">Apache</a>
</li>
<li>
<a href="installPHP.html" style="text-decoration: none">PHP</a>
</li>
</ul>
</li>
<li>
<a class="fNiv">HTML</a>
<ul>
<li class="arrow"></li>
<li>
<a href="xhtml.html" style="text-decoration: none">Basics</a>
</li>
<li>
<a>Other</a>
</li>
</ul>
</li>
<li>
<a class="fNiv">Examples</a>
<ul>
<li class="arrow"></li>
<li><a>Basic PHP</a></li>
<li><a>Downloading</a></li>
<li>
<a>Other</a>
<ul>
<li><a>Category 4.3</a></li>
<li><a>Category 4.3</a></li>
<li><a>Category 4.3</a></li>
<li><a>Category 4.3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a class="fNiv">MYSQL</a>
<ul>
<li class="arrow"></li>
<li>
<a>MYSQL</a>
<ul>
<li><a>Category 5.3</a></li>
<li><a>Category 5.3</a></li>
<li><a>Category 5.3</a></li>
<li><a>Category 5.3</a></li>
</ul>
</li>
<li><a>Category 5.2</a></li>
<li><a>Category 5.2</a></li>
<li><a>Category 5.2</a></li>
</ul>
</li>
<li><a class="fNiv">PHP</a></li>
<li>
<a class="fNiv">Help</a>
<ul>
<li class="arrow"></li>
<li><a>Category 7.2</a></li>
<li><a>Category 7.2</a></li>
<li><a>Category 7.2</a></li>
<li><a>Category 7.2</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$("#jMenu").jMenu();
});
</script>
</div>
<div id="main">
<div id="editable">
<div id="information">
<div id='accordion_example'>
<h2>What is PHP</h2>
<p>PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. </p>
<h2>The Basics</h2>
<p>PHP scripting starts with <?php and ends with ?> <br />
<?php
<br />
<br />
? > <br />
Can be placed anywhere in the document <br />
Can have multiple PHP tags in a document <br />
PHP file contains HTML tags and PHP scripting code <br />
</p>
<h2>XHTML</h2>
<p>Stands for eXtensible Hypertext Markup Language<br /> <br />
Markup in this name refers to the coded tags that allow the web page designer to format documents displayed on the web <br /><br />
Tool for designing the format of a web page <br />
</p>
<h2>Resources</h2>
<p> Some web pages you may want to look at for reference are: <br />
www.w3schools.com <br />
www.stackoverflow.com <br />
www.php.net <br />
</p>
<h2>Examples</h2>
<p> examples </p>
<h2>MYSQL</h2>
<p> sql </p>
</div>
</div>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html>
这也是 CSS:
@charset "utf-8";
/* CSS Document */
#container{
position: relative;
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
border-top: black thin solid;
border-right: black thin solid;
border-bottom: black thin solid;
border-left: black thin solid;
background-color: #575757;
}
#header{
text-align: center;
background-image: url(../images/header2.png);
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 125px;
position: center;
}
#navigation{
text-align: center;
width: 100%;
height:40px;
background-repeat: no-repeat;
background-color: #322f32;
position: center;
/*
border-top: #99989d thin solid;
border-bottom: #99989d thin solid;
*/
border-bottom: black thin solid;
border-top: black thin solid;
}
#main {
width:730px;
height:auto;
position:relative;
top:20px;
left:30px;
bottom:20px;
right:30px;
padding-left:3px;
padding-right:3px;
padding-bottom:3px;
padding-top:3px;
background-color:#d1d1d4;
}
#information{
padding: 2px;
;}
#editable{
padding: 1px;
}
最佳答案
既然我上面的评论似乎修复了它，我将其添加为答案:
您的文档类型之前不能有任何元素(甚至不能是注释)，否则 IE 将切换到怪异模式...因此请删除文档类型上方的注释，看看是否可以解决问题。
关于jquery - 有人知道为什么我的使用 jquery 的网页在 IE 中格式不正确吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18750513/