Question

在上一个问题中有人能够帮助我解决IE中的导航问题。我的新问题出现在firefox和IE中。会发生什么是容器只在文本的范围内扩展。在主页上只有一半，因为这是文本的走向，但在另一个页面上，它的大小可以滚动，因为文本扩展到屏幕的底部。据我所知，这种情况发生在所有版本的Firefox和除10之外的所有IE版本中。但它确实适用于Chrome和Safari。

HTML：

<!--[If ! IE]>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<![endif]-->

<!--[If lte IE 9]>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "w3.org/TR/html4/strict.dtd">
<![endif]-->

<html>
<head>
    <title>Amity Technology Education</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <center>
        <div class="container">
        <!-- Start Header -->
            <div class="header">
                <img align="left" height="100%" width="180px"src="G:\Web Design\Website\Images\Tech Pics\amityshield.jpg"/>
                <h1>Welcome to Amity Technology Education</h1>
            </div>
        <!-- End Header -->

    <!-- Start Naviagtion Bar -->
            <center>
                <ul id="nav">
                    <!-- Has Dropdown -->
                    <li class="current"><a href="homepage.html">Home</a></li>
                    <li><a href="consumer.html">Consumer &amp; Family Science</a>
                        <ul>
                            <li><a href="zawacki.html">Mr. Zawacki</a></li>
                            <li><a href="anderson.html">Mrs. Anderson</a></li>
                            <li><a href="hans.html">Mr. Hans</a></li>
                        </ul>
                        </li>
                    <li><a href="business.html">Business Education</a>
                        <ul>
                            <li><a href="fuller.html">Mr. Fuller</a></li>
                            <li><a href="cofrancesco.html">Mr. Cofrancesco</a></li>
                            <li><a href="tupper.html">Mrs. Tupper</a></li>
                        </ul>
                    </li>
                    <li><a href="tech.html">Technology Education</a>
                        <ul>
                            <li><a href="richard.html">Mr. Richard</a></li>
                            <li><a href="teravainen.html">Mr. Teravainen</a></li>
                            <li><a href="battaglia.html">Mr. Battaglia</a></li>
                            <li><a href="loman.html">Ms. Loman</a></li>
                            <li><a href="whelpley.html">Mr. Whelpley</a></li>
                        </ul>
                    </li>
                </ul>
            </center>
    <!-- End Navigation Bar -->
    <!-- Start Content -->
            <center>
                <h1>Applied Education Statement of Philosophy</h1>
            </center>
                    <p align="left" id="usualp">
                    The philosophy of the Career and Technical Education Department (CTE) reflects Amity’s Common Core of Learning goals to prepare 
                    students for life by offering them opportunities to acquire skills and competencies in the areas of career and family living. 
                    Course variety gives students the chance to experience growth and learning in many areas essential to becoming productive and 
                    contributing members of society. Career and Technical Education courses also provide students with the opportunities to pursue 
                    academic excellence through a variety of learning experiences which address the diversity of our student population. 
                    Heterogeneous grouping allows for experiences which reflect a microcosm of society (mutual respect, sense of caring/cooperation,
                     sense of community, etc.) The various electives offered by the Career and Technical Education Department will enhance the 
                    future of students whether they are pursuing post secondary education, entering directly into the job market, or developing 
                    personal and leisure-time interests.
                    </p>
    <!-- End Content -->
        </div>
    </center>

</body>
</html>

CSS：

body {
    background-color: #eee;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    background-size: 100%;
}
a {
    color: #333;
}
.container {
    background-color: #767070;
    width: 75%;
    height: 97%;
    min-width: 1000px;
    min-height: 600px;
    border-style: none;
    box-shadow: 0 0 10px 3px #888888;
    height: auto;
    min-height: 97% !important;
}
.header {
    width: 100%;
    height: 150px;
    background-color: #767070;
    background-size: cover;
}
.header h1 {
    float: left;
    position: relative;
    left: 55px;
    top: 25px;
}
#nav {
    width: 98.8%;
    margin: 0;
    padding: 7px 6px 0;
    background: #2b2b2b;
    line-height: 100%;
    display: inline-block;
}
#nav li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none;
}
#nav a {
    font-weight: bold;
    color: #e7e5e5;
    text-decoration: none;
    display: block;
    padding: 8px 20px;
    margin: 0;
}
#nav a: hover {
    background: #000;
    color: #fff;
}
#nav .current a, #nav li:hover > a {
    background: #ddd;
    color: #666;
}
#nav ul li:hover a, #nav li:hover li a {
    background: none;
    border: none;
    color: #666;
}
#nav ul a:hover {
    color: black!important;
}
#nav li:hover > ul {
    display: block;
}
#nav ul {
    display: none;
    margin: 0;
    padding: 0;
    width: 98.5%;
    position: absolute;
    top: 35px;
    left: 0;
    background: #ddd;
    border: 1px solid #b4b4b4;
}
#nav ul li {
    float: none;
    margin: 0;
    padding: 0;
}
#nav ul a {
    font-weight: normal;
}
#usualp {
    margin: 5px;
    color: #EEEEEE;
    text-indent: 50px;
}
p {
    margin: 5px;
    color: #EEEEEE;
}
#fullercoursesheadings {
    text-align: left;
    margin: 5px;
}

Answer 1

不推荐使用<center>标记可能是问题吗？

HTML5不支持，在您的代码中我没有看到IE以外的其他浏览器的doctype正确吗？也许Chrome和FF默认为<doctype html>？

您可以使用以下内容：

<div class="center">

并在你的CSS中：

.center { margin: 0 50%; }

容器没有扩展

1 个答案: