Question

我有一个我正在研究的网站，而且我很肯定这是显而易见的，我忽略了这里。

我的主要问题以及为什么我在这里：我的页面在Chrome和Safari中看起来很棒，但FF v.21（Mac）采用textcont和linkcont图层并将它们一直放在容器外面的容器中我有他们。我知道它们是浮动的，但我似乎无法让它们在那里正确显示。

* 编辑：6-18 @ 1p - *我解决了另一个问题，但Firefox仍然将两个内部容器放在主要内容容器的外部。

* 编辑：6-20 @ 9：45a - *我发现如果我添加“Position：absolute;”对于#contentbox，一切似乎都适用于Chrome，Safari和Firefox（目前无法在IE上测试），但我的#copybox div（最后一层显示版权最低的年份）会对齐顶部的#contentbox。我尝试在该div上使用绝对位置，但只是让它可见，相对使它隐藏 - 但仍然在它不应该的顶部。有任何想法吗？如果我可以获得绝对的定位来处理内容，我只需要修复一下#copybox跟在#contentbox层的末尾。

Firefox屏幕截图：http://i41.tinypic.com/20t0xh0.png

Chrome / Safari（正确）：http://i40.tinypic.com/a4y1ar.png

样式代码：

 @charset "UTF-8";
 /* CSS Document */

body {
background-color: #FAD434;
font-family: Helvetica, arial, sans-serif;
font-size: 14px;
}

#container {
width: 100%;
padding: 0px;
margin: 0 auto;
}

#headercont {
width: 900px;
margin: 0 auto;
}

#header {
width: 100%;
height: 65px;
margin: 0 auto;
background-color: #000000;
background-image:url(img/logo.png);
background-repeat: no-repeat;
background-position: left;
border-bottom: 2px solid #fad434;
}

#picheader {
height: 360px;
background-image:url(img/NHYC_BoySmile.jpg);
background-repeat: no-repeat;
background-position: top center;
}

#contentbox {
width: 100%;
background-image: url(img/content_bkgd.jpg);
background-position: bottom center;
background-repeat: repeat-x;
background-color: #ffffff;
margin-top: 0px;
padding-bottom: 50px;
}

#contentcont {
width: 900px;
margin: 0 auto;
overflow: auto;
}


#textcont {
width: 70%;
padding: 0px 0px 25px 10px;
float: left;
}

#linkcont{
width: 25%;
padding-top: 63px;
padding-right: 10px;
padding-left: 10px;
float: right;
}

#copybox {
width: 100%;
font-size: 10px;
text-align: center;
padding: 15px;
}

/* --- HEADER TEXT --- */

h1 {
font-size: 40pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}

h2 {
font-size: 24 pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
    text-transform: uppercase;
}

h3 {
font-size: 18 pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
    text-transform: uppercase;
}

/* --- LINK LIST --- */
.links li {
list-style-type:none;
line-height: 20pt;
}


/* --- MENU --- */
#menu {
width: 100%;
margin: 0 auto;
padding-top: 325px;
}

#menu ul, #menu ul ul {
list-style-type: none;
padding: 0;
margin: 0 auto;
}

#menu ul li{
padding: 10px 25px;
position: relative;
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-transform: uppercase;
}

#menu ul a:link, #menu ul a:visited{
display: inline-block;
color: #ffffff;
width: 90px;
padding: 5px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: center;
}

#menu ul a:hover, #menu ul a:active {
background: #f28c3d;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

Index.php代码：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>NHYC - Ohio</title>
<link href="nhyc_styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
    <div id="headercont">
        <div id="header">
            <p align="right"><img src="img/socialmedia_icons.png" alt="Social Media" border="0" usemap="#socialmedia" style="padding-right:15px; padding-top: 18px;"/>
            <map name="socialmedia" id="socialmedia">
                <area shape="rect" coords="2,4,27,25" href="#" target="_blank" alt="Facebook" />
                <area shape="rect" coords="42,4,69,24" href="#" target="_blank" alt="Twitter" />
            </map>
            </p>
        </div> <!--End of header-->
        <div id="picheader">
            <div id="menu">
                <ul>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Mission</a></li>
                   <li><a href="#">Services</a></li>
                   <li><a href="#">Admission</a></li>
                   <li><a href="#">Employment</a></li>
                   <li><a href="#">Contact</a></li>
                </ul>
            </div> 
            <!--End of navigation-->
        </div> <!--End of picheader-->
     </div> <!--End of headercont-->
     <div id="contentbox">
        <div id="contentcont">
            <div id="textcont">
                <?php
                    if (!isset($_REQUEST['topic']))
                       include("aboutus.php");
                    else
                    {
                       $topic = $_REQUEST['topic'];
                       $nextpage = $topic . ".php";
                       include($nextpage);
                    } ?>
          </div><!--End of textcont-->
             <div id="linkcont">
                <h3>Resources</h3>
                <ul class="links">
                <li>Link #1</li>
                <li>Link #2</li>
                <li>Link #3</li>                    
                <li>Link #4</li>
                </ul>
             </div> <!--End of linkcont-->
         </div>
     </div> <!--End of contentbox-->
</div> <!--End of container-->
    <div id="copybox">
        2013 &copy; NHYC
     </div> <!--End of copybox -->
</body>
</html>

Answer 1

#contentbox {
    overflow: hidden;
}

...将纠正您的问题。

你有一个未清除的浮动，溢出：隐藏将清除它。阅读有关块格式化上下文的更多信息（溢出的隐藏的CSS细微差别：隐藏适用）here。

Firefox Div对齐不起作用;适用于Chrome，IE和＆amp;苹果浏览器

1 个答案: