XHTML Strict 1.0/CSS 中的 Mozilla 浮动错误

Question

我正在处理一个包含多个列的项目。布局在 Chrome、IE、Opera、甚至 Konqueror 中正确显示，但在 Firefox 中不正确。我目前使用的是 Firefox 37.0.1。

我遇到的问题是，在 Mozilla 中打开时，我的所有 div 都重叠在页面顶部的背景图像之上。我想更正它，以便它像在 Chrome、Konqueror 等

中那样显示

我还附上了图片以直观显示问题。

（正确显示）

（显示不正确

编辑

http://i57.tinypic.com/fp58n7.jpg

在这张最终图片中，我应用了建议的解决方案

 <div style="clear:both;"></div>

清除父 div 的浮点数，但我无法让它按照我想要的方式工作。

这是我的 CSS 代码：

/* ORGANIZATION: CAL WATER WARS
AUTHOR: GEOFF HOWARD
LAST REVISED: 4/13/201 */

/* VIEWPORT RENDERING */
/* background image auto-scaling */

html {
height: 100%;
background: #99afd6;
}

body {
    height: 100%;
    margin: 0 auto;
    background-color: #0078c4; 
    font-family: verdana;
    font-size: .9em;
    background-image: url(content.jpg);
    background-repeat: no-repeat;
    background-position: 320px 24px;
}

/*this creates the slow fade affect on all links */
a       {
        -webkit-transition:all .5s;
    }

/* END VIEWPORT RENDERING */

/*  LAYOUT SETUP */

/* content center + page wrapping */

#contentwrap    {
                width: 1024px;
                height: auto;
                margin: 0 auto;
                /*padding-top: 200px;*/
            }

/* water droplet navigation cfg */

div#sidenav     {
                clear: both;
                padding-top: 100px;
                width: 128px;
                margin-left: auto;
                margin-right: auto;
                padding-right: 50px;
            }

            /* nav link transition setup */

        #sidenav ul {
                        list-style-type: none;
                    }
        #sidenav li a {
                        display: block;
                        background: url(water.png); /* free stock icon copyright: http://www.elegantthemes.com/ */
                        background-repeat: no-repeat;
                        background-position: center;
                        width: 128px;
                        height: 128px;
                    }
        #sidenav li a:hover {
                        color: #fff;
                        background: url(waterhover.png); /* free stock icon copyright: http://www.elegantthemes.com/ */
                        background-repeat: no-repeat;
                        background-position: center;
                        width: 128px;
                        height: 128px;
                    }

/* menu frame cfg */

div#menubox     {   
                padding-top: 200px;
                width: 300px;
                margin: 0px;
                float: left;
                height: 100%;
                /*background-color: #4f5d73;*/
            }

div#menubox p   {
                text-indent: 5em;
            }

div#menubox h2  {
                text-align: center;
                color: #77b3d4;
                text-decoration: none;
            }

div#menubox h2 a:link   {
                text-decoration: none;
            }

div#menubox h2 a:visited {
                color: #77b3d4;
                text-decoration: none;
            }

div#menubox h2 a:hover  {
                color: #4f5d73;
            }

/*drop down menu cfg, learned from a tutorial found at www.csswizardry.com */

#menu   {
                    list-style: none;
                    font-weight: bold;
                    margin-bottom: 10px;
                    float:left;
                    width: 100%;
                    position: relative;
                    z-index: 5;
                }

#menu li{
                    float: left;
                    margin-right: 10px;
                    position: relative;
                    text-align: center;
                    color: #c0d8f1;
                }


#menu a {
                    display: block;
                    padding: 5px;
                    color:#4973AB;
                    background: #FFF;
                    text-decoration: none;
                    text-align: left !important;
                }

#menu a:hover   {
                            color: #4973AB;
                            background:#DBE9EC;
                            text-decoration: underline;
                        }

#menu ul{
                    background: #fff;
                    background: rgba(255,255,255,0);
                    list-style:none;
                    position:absolute;
                    left:-9999px;
                }

#menu ul li{
                    padding-top: 1px;
                    float:none;
                }

#menu ul a{
                    white-space:nowrap;
                }

#menu li:hover ul{
                left:0;
                }

#menu li:hover a{
                background:#DBE9EC;
                text-decoration:underline;
                }

#menu li:hover ul a{
                text-decoration:none;
                }

#menu li:hover ul li{
                background-color: #fff;
                color: #4f5d73;
        }

#menu li:hover ul li a:hover{
                background:#333;
                }

/* story frame cfg */

div#storybox    {
                margin: 0px;
                margin-left: 304px;
                padding-left: 20px;
                text-indent: 3em;
                width: 700px;
                background-color: rgba(119,179,212,0.7);
                min-height: 100px;
                max-height: 500px;
                border-top: groove;
                border-left: groove;
                border-top-left-radius: 25px;
                border-bottom-left-radius: 25px;
                border-top-right-radius: 15px;
                border-bottom-right-radius: 15px;
                border-color: #fff;
                overflow-y:scroll;
                overflow-x:hidden;
                color: #fff;

            }


div#storybox h2 {
                color: #fff;
                text-align: center !important;
                text-decoration: underline;
            }

div#storybox h3 {
                color: #d1edff;
                text-align: center !important;
                font-style: italic;
            }

div#storybox a:link {
                color: #0059FF;
                text-decoration: none;
                font-size: 1.3em;
            }

div#storybox a:visited {
                color: #0059FF;
                text-decoration: none;
            }

div#storybox a:hover {
                color: #FFA500;
                text-decoration: none;
}


/* begin scrollbar configuration, learned from Whosebug forums */

#storybox       {
                scrollbar-face-color: #009cfe;
                scrollbar-shadow-color: #FFFFFF;
                scrollbar-highlight-color: #009cfe;
                scrollbar-3dlight-color: #009cfe;
                scrollbar-darkshadow-color: #FFFFFF;
                scrollbar-track-color: #FFFFFF;
                scrollbar-arrow-color: #009cfe;
            }




#storybox::-webkit-scrollbar {
width: 10px;
                         }


#storybox::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,1); 
        -webkit-border-top-right-radius: 15px;
                 border-bottom-right-radius: 15px;
                                }


#storybox::-webkit-scrollbar-thumb {
-webkit-border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background: #009cfe; 
-webkit-box-shadow: inset 0 0 1px rgba(255,255,255,1); 

}

/* end scrollbar configuration */


/* top navigation cfg */


div#topnav      {
                    color: #fff;
                    width: 1024px;
                    font-size: 2em;
                    font-family: sans-serif;

                }


div#topnav ul   {
                    list-style-type: none;
                    float: right;
                }


div#topnav ul li {
                    display: block;
                    padding: 10px;
                }


div#topnav ul li a:link {
                    color: #fff;
                    text-decoration: none;
                }


div#topnav ul li a:visited { 
                    color: #fff;
                }


div#topnav ul li a:hover {
                    color: #4f5d73;
                    background-color: #fff;
                        }



/* END LAYOUT SETUP */

最后，我的 (X)HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- ORGANIZATION: CAL WATER WARS 
 AUTHOR: GEOFF HOWARD
 LAST REVISED: 4/13/2015
                              -->
<head>
<title>California Water Wars</title>
<meta http-equiv="content-type" 
    content="text/html;charset=utf-8" />
<link href="test.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script>
<![endif]-->
</head>
<body>
<div id="contentwrap">
<div id="topnav">
<ul>
<li>
<a href="resources.html">resources</a>
</li>

<li>
<a href="policies.html">policies</a>
</li>

<li>
<a href="sanitation.html">sanitation</a>
</li>
    </ul>
</div>
<div id="menubox">
<h2>
Editors
</h2>
<ul id="menu">
<li>
    John Howard
        <ul>
            <li>
                Available Stories
            </li>
            <li>
                <a href="agrainofsalt.html">A Grain of Salt</a>
            </li>
            <li>
                <a href="despitedrought.html">Despite Drought, Water Conservation Not a Priority</a>
            </li>
    </ul>
</li>
</ul>
<div id="sidenav">

<ul>
    <li>
        <a href="content.html"></a>
    </li>
</ul>

</div>
</div>

<div id="storybox">
<h2>
Who We Are
</h2>

<p>
California Water Wars offers a snapshot of water policy and politics in  California. We are a professional news team with experience covering California water issues and government, including the Legislature, the bureaucracy and the lobbying community.</p>

<p>
Since statehood – before, in fact – disputes over water have defined California; north and south, inland and coastal. The mission of California Water Wars is to inform the public and policy makers about California water issues and to suggest solutions to the problems.
</p>
</div>
</div>

</body>

</html>

Answer 1

嗯，嵌套浮动。部分问题是由 #menubox 内部的 clear: both 引起的，它本身是浮动的。 Firefox 处理得不是很好。您不能真正清除其自身内部的浮动元素，只有在其结束后才能清除。所以起初我认为解决方案是在 #storybox 上包含一个 clear: right，并将 #sidenav 上的 clear: both 更改为 clear:right.

但是，由于那些嵌套的浮点数，这行不通。
因此，最好的办法是通过绝对定位将 #menubox 从流中移除。

#contentwrap    {
  (...)
  position:relative; /* needed as container for abs positioning */
}
div#menubox     {   
  (...)
  position:absolute;
  left:0 top:0;
}
div#storybox    {
  (...)
  clear:right; /* and you do need this. */
}

/* ORGANIZATION: CAL WATER WARS
AUTHOR: GEOFF HOWARD
LAST REVISED: 4/13/201 */

/* VIEWPORT RENDERING */
/* background image auto-scaling */

html {
    height: 100%;
    background: #99afd6;
}

body {
    height: 100%;
    margin: 0 auto;
    background-color: #0078c4; 
    font-family: verdana;
    font-size: .9em;
    background-image: url(content.jpg);
    background-repeat: no-repeat;
    background-position: 320px 24px;
}

/*this creates the slow fade affect on all links */
a       {
    -webkit-transition:all .5s;
}

/* END VIEWPORT RENDERING */

/*  LAYOUT SETUP */

/* content center + page wrapping */

#contentwrap    {
    width: 1024px;
    height: auto;
    margin: 0 auto;
    /*padding-top: 200px;*/
  position:relative;
}

/* water droplet navigation cfg */

div#sidenav     {
    padding-top: 100px;
    width: 128px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 50px;
}

/* nav link transition setup */

#sidenav ul {
    list-style-type: none;
}
#sidenav li a {
    display: block;
    background: url(water.png); /* free stock icon copyright: http://www.elegantthemes.com/ */
    background-repeat: no-repeat;
    background-position: center;
    width: 128px;
    height: 128px;
}
#sidenav li a:hover {
    color: #fff;
    background: url(waterhover.png); /* free stock icon copyright: http://www.elegantthemes.com/ */
    background-repeat: no-repeat;
    background-position: center;
    width: 128px;
    height: 128px;
}

/* menu frame cfg */

div#menubox     {   
    position:absolute;
    left:0 top:0;
    padding-top: 200px;
    width: 300px;
    margin: 0px;
    height: 100%;
    /*background-color: #4f5d73;*/
}

div#menubox p   {
    text-indent: 5em;
}

div#menubox h2  {
    text-align: center;
    color: #77b3d4;
    text-decoration: none;
}

div#menubox h2 a:link   {
    text-decoration: none;
}

div#menubox h2 a:visited {
    color: #77b3d4;
    text-decoration: none;
}

div#menubox h2 a:hover  {
    color: #4f5d73;
}

/*drop down menu cfg, learned from a tutorial found at www.csswizardry.com */

#menu   {
    list-style: none;
    font-weight: bold;
    margin-bottom: 10px;
    float:left;
    width: 100%;
    position: relative;
    z-index: 5;
}

#menu li{
    float: left;
    margin-right: 10px;
    position: relative;
    text-align: center;
    color: #c0d8f1;
}


#menu a {
    display: block;
    padding: 5px;
    color:#4973AB;
    background: #FFF;
    text-decoration: none;
    text-align: left !important;
}

#menu a:hover   {
    color: #4973AB;
    background:#DBE9EC;
    text-decoration: underline;
}

#menu ul{
    background: #fff;
    background: rgba(255,255,255,0);
    list-style:none;
    position:absolute;
    left:-9999px;
}

#menu ul li{
    padding-top: 1px;
    float:none;
}

#menu ul a{
    white-space:nowrap;
}

#menu li:hover ul{
    left:0;
}

#menu li:hover a{
    background:#DBE9EC;
    text-decoration:underline;
}

#menu li:hover ul a{
    text-decoration:none;
}

#menu li:hover ul li{
    background-color: #fff;
    color: #4f5d73;
}

#menu li:hover ul li a:hover{
    background:#333;
}

/* story frame cfg */

div#storybox    {
    clear:right;
    margin: 0px;
    margin-left: 304px;
    padding-left: 20px;
    text-indent: 3em;
    width: 700px;
    background-color: rgba(119,179,212,0.7);
    min-height: 100px;
    max-height: 500px;
    border-top: groove;
    border-left: groove;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-color: #fff;
    overflow-y:scroll;
    /*overflow-x:hidden;*/
    color: #fff;
    
}


div#storybox h2 {
    color: #fff;
    text-align: center !important;
    text-decoration: underline;
}

div#storybox h3 {
    color: #d1edff;
    text-align: center !important;
    font-style: italic;
}

div#storybox a:link {
    color: #0059FF;
    text-decoration: none;
    font-size: 1.3em;
}

div#storybox a:visited {
    color: #0059FF;
    text-decoration: none;
}

div#storybox a:hover {
    color: #FFA500;
    text-decoration: none;
}


/* begin scrollbar configuration, learned from Whosebug forums */

#storybox       {
    scrollbar-face-color: #009cfe;
    scrollbar-shadow-color: #FFFFFF;
    scrollbar-highlight-color: #009cfe;
    scrollbar-3dlight-color: #009cfe;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #009cfe;
}




#storybox::-webkit-scrollbar {
    width: 10px;
}


#storybox::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,1); 
    -webkit-border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}


#storybox::-webkit-scrollbar-thumb {
    -webkit-border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    background: #009cfe; 
    -webkit-box-shadow: inset 0 0 1px rgba(255,255,255,1); 
    
}

/* end scrollbar configuration */


/* top navigation cfg */


div#topnav      {
    color: #fff;
    width: 1024px;
    font-size: 2em;
    font-family: sans-serif;
    
}


div#topnav ul   {
    list-style-type: none;
    float: right;
}


div#topnav ul li {
    display: block;
    padding: 10px;
}


div#topnav ul li a:link {
    color: #fff;
    text-decoration: none;
}


div#topnav ul li a:visited { 
    color: #fff;
}


div#topnav ul li a:hover {
    color: #4f5d73;
    background-color: #fff;
}



/* END LAYOUT SETUP */

<div id="contentwrap">
    <div id="topnav">
        <ul>
            <li>
                <a href="resources.html">resources</a>
            </li>
            
            <li>
                <a href="policies.html">policies</a>
            </li>
            
            <li>
                <a href="sanitation.html">sanitation</a>
            </li>
        </ul>
    </div>
    <div id="menubox">
        <h2>
            Editors
        </h2>
        <ul id="menu">
            <li>
                John Howard
                <ul>
                    <li>
                        Available Stories
                    </li>
                    <li>
                        <a href="agrainofsalt.html">A Grain of Salt</a>
                    </li>
                    <li>
                        <a href="despitedrought.html">Despite Drought, Water Conservation Not a Priority</a>
                    </li>
                </ul>
            </li>
        </ul>
        <div id="sidenav">
            
            <ul>
                <li>
                    <a href="content.html"></a>
                </li>
            </ul>
            
        </div>
    </div>
    
    <div id="storybox">
        <h2>
            Who We Are
        </h2>
        
        <p>
            California Water Wars offers a snapshot of water policy and politics in  California. We are a professional news team with experience covering California water issues and government, including the Legislature, the bureaucracy and the lobbying community.</p>
        
        <p>
            Since statehood – before, in fact – disputes over water have defined California; north and south, inland and coastal. The mission of California Water Wars is to inform the public and policy makers about California water issues and to suggest solutions to the problems.
        </p>
    </div>
</div>

就是这样。您可能还需要重新定位其他元素，这些元素现在位于 #menubox 下。但这主要是调整左边距的问题。

XHTML Strict 1.0/CSS 中的 Mozilla 浮动错误

Mozilla Float Bug in XHTML Strict 1.0/CSS

html

css

dom

xhtml

css-float