1

我一直在为我大学的教授创建一个网站,以帮助教授基本的 php。我一直在设计它并使用 Firefox 预览它,直到现在才真正考虑在 IE 中测试它,我发现它不能正确预览。jQuery 导航在应该水平加载时垂直加载。我使用 W3C 验证器检查我的主页和我的 css 表中的代码,它们都签出。我读过 IE 必须有一个正确的 DocType 才能加载页面,有时我认为我的页面是正确的。我正在为我的导航栏使用一个 jquery 菜单,并在我的身体中使用一个 jquery 手风琴。任何想法为什么它们显示不正确以及为什么它们没有在页面中间居中?

显示格式损坏的 IE 屏幕截图

我希望它可以在 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 &lt;?php and ends with ?> <br />
              &lt;?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;
}
4

1 回答 1

3

由于我上面的评论似乎修复了它,我将其添加为答案:

在您的 doctype 之前您不能有任何元素(甚至没有评论),否则 IE 将切换到 quirksmode...所以请删除您在 doctype 上方的评论,看看是否能解决问题。

于 2013-09-13T17:14:36.893 回答