Firefox Div 对齐不起作用；适用于 Chrome、IE 和 Safari答案

【问题标题】：Firefox Div Alignment Not Working; Works in Chrome, IE, & SafariFirefox Div 对齐不起作用；适用于 Chrome、IE 和 Safari
【发布时间】：2013-06-13 20:50:32
【问题描述】：

我正在开发一个网站，我很肯定我在这里忽略了一些明显的东西。

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

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

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

火狐截图：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>

【问题讨论】：

标签： firefox cross-browser alignment html floating

【解决方案1】：

#contentbox {
    overflow: hidden;
}

...将纠正您的问题。

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

【讨论】：

这确实解决了对齐问题，但现在标题/菜单容器和内容框本身之间存在间隙。
您看到的空间实际上来自另一个未清除的浮动。 #menu ul 中的 LI 是浮动的，需要清除，所以：#menu ul { overflow: hidden; } 应该管用。任何带有浮动子元素的容器都应该得到隐藏溢出或clearfix。
谢谢！那成功了！将溢出：隐藏添加到菜单和容器中，并在所有浏览器中解决了该问题。感谢您的帮助，如果我用这么简单的答案浪费了您的时间，我深表歉意！哈哈。我还在学习做完整的 CSS 布局；我学到了旧东西。