Firefox Div 对齐不起作用;适用于 Chrome、IE 和 Safari

标签 firefox cross-browser alignment html floating

我正在开发一个网站,我确信我在这里忽略了一些明显的东西。

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

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

*编辑:6-20 @ 9:45a--*我发现如果我添加“position:absolute;”对于 #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>

最佳答案

#contentbox {
    overflow: hidden;
}

...将解决您的问题。

那里有一个未清除的 float ,溢出:隐藏将清除它。阅读有关 block 格式化上下文的更多信息(溢出:隐藏适用的奇怪的隐藏 CSS 细微差别)here .

关于Firefox Div 对齐不起作用;适用于 Chrome、IE 和 Safari,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17155338/

相关文章:

css - 我无法将这些按钮居中

html - 水平对齐 div 内的按钮

css - 图像在 firefox 中奇怪地拉伸(stretch)

firefox - 如何在没有 Firefox 的情况下下载 Firefox 附加组件

javascript - 使用当前浏览器离开页面之前的自定义消息

所有浏览器中具有相同行高的按钮

javascript - window.onload 在 Firefox+Greasemonkey 脚本中有效,但在 Chrome 用户脚本中无效?

html - CSS如何使水平菜单居中?

javascript - 如何使 HTML 文档在浏览器中可写?

javascript - FormData 不适用于 Firefox 上的 String