XHTML Strict 1.0 / CSS中的Mozilla Float Bug

时间：2015-04-13 22:11:00

标签： html css dom xhtml css-float

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

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

我还附上图片以形象化问题。

enter image description here（正确显示）

enter image description here（不正确的显示

修改

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 stackoverflow 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>

1 个答案:

答案 0 :(得分：0)

嗯，嵌套浮动。部分问题是由clear: both内的#menubox引起的，clear: right本身就是浮动的。 Firefox并没有很好地处理它。只有在结束之后，你才能真正清除自身内部的浮动元素。首先，我认为解决方案是在#storybox上添加clear: both，并将#sidenav上的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 stackoverflow 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 */

＆＃13;
＆＃13; 
<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>
＆＃13; 
#menubox
＆＃13;
＆＃13;
＆＃13;

关于它。您可能还需要重新定位其他元素，这些元素现在最终位于{{1}}下。但这主要是调整左边距的问题。

相关问题
最新问题