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

【问题标题】：Mozilla Float Bug in XHTML Strict 1.0/CSSXHTML Strict 1.0/CSS 中的 Mozilla 浮动错误
【发布时间】：2015-04-13 22:11:00
【问题描述】：

我正在处理一个包含多个列的项目。布局在 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 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>

【问题讨论】：

    标签： html css dom xhtml css-float


    【解决方案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 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 */
    <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 下。但这主要是调整左边距的问题。

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-10-29
      • 2010-10-31
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode