个人中心
gpt4 book ai didi

html - 容器不展开

转载 作者：行者123 更新时间：2023-11-28 11:55:04 25 4
gpt4 key购买 nike

在上一个问题中，有人能够帮助我解决 IE 中的导航问题。我的新问题出现在 firefox 和 IE 中。发生的情况是容器仅在文本范围内扩展。在主页上，它只下降了一半，因为那是文本的长度，但在另一个页面上，它的大小是可滚动的，因为文本扩展到屏幕底部。据我所知，这发生在所有版本的 Firefox 和所有版本的 IE 中，除了 10。它在 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;
}

最佳答案

<center>标签已弃用，这可能是问题所在吗？

它在 HTML5 中不受支持，在您的代码中我没有看到除 IE 之外的其他浏览器的文档类型，对吗？也许 Chrome 和 FF 假定 <doctype html>默认情况下？

你可以使用这样的东西:

<div class="center">

在你的 CSS 中:

.center { margin: 0 50%; }

关于html - 容器不展开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20147316/

25 4 0
文章推荐： javascript - HTML/jQuery : How to properly call a function on an anchor tag (cross-browser)
文章推荐： html - 在网格模板区域中使用重复而不是必须重复网格单元名称
文章推荐： css - AjaxMin 将 CSS 与相对路径 bundle 在一起
文章推荐： javascript - "repeating"方法调用的奇怪 Javascript 语法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com