浮动 div 在 Firefox 中无法正常工作答案

【问题标题】：Floating divs not working properly in Firefox浮动 div 在 Firefox 中无法正常工作
【发布时间】：2014-02-06 12:35:43
【问题描述】：

我的网页在 Chrome 和 IE 上可以正常工作，但在 Firefox 上不能。我正在使用带有缩放按钮和浮动 div 的液体布局。目前，内容滑块应该在页面中间（就像在 Chrome 和 IE 上一样），但在 Firefox 上，它会跳到其他按钮的顶部。我的代码有什么问题？

index.html:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Cnop</title>

</head>

<body>

<div id="col1"><a href="http://cnopicilin.deviantart.com/" target="new"><img src="Images/da.png" class="opacity_img"></a></div>
<div id="col2"><a href="https://www.youtube.com/user/CnopHD" target="new"><img src="Images/Games.png" class="opacity_img"></a></div>
<div id="col2"><a href="https://www.youtube.com/user/JARMOPOWER" target="new"><img src="Images/blue.png" class="opacity_img"></a></div>
<div id="col2"><a href="https://www.youtube.com/channel/UC9w6xXZm7YYQMHEZNwJEt6w" target="_blank"><img src="Images/main.png" class="opacity_img"></a></div>
<div id="col2"><a href="https://www.facebook.com/CnopMedia" target="new"><img src="Images/fb.png" class="opacity_img"></a></div>
<div id="col3"><a href="https://www.facebook.com/CnopMedia" target="new"><img src="Images/cnop.png" class="channel"></a></div>

<div class="erotin"></div>

<div class="container">
    <a href="#">
        <img class="thumb" src="Images/scroll/thumb1.png">
        <img class="big" src="Images/scroll/big1.png">
    </a>

    <a href="#">
        <img class="thumb" src="Images/scroll/thumb2.png">
        <img class="big" src="Images/scroll/big2.png">
    </a>

    <a href="#">
        <img class="thumb" src="Images/scroll/thumb3.png">
        <img class="big" src="Images/scroll/big3.png">
    </a>

    <a href="#">
        <img class="thumb" src="Images/scroll/thumb4.png">
        <img class="big" src="Images/scroll/big4.png">
    </a>

    <a href="#">
        <img class="big featured" src="Images/scroll/featured.png">
    </a>

    <a href="#">
        <img class="big featured2" src="Images/scroll/featured2.png">
    </a>
</div>

</body> 

</html>

CSS：

body {
    background-color: #000000;
    /*background-image:url(Images/tausta.jpg);
    background-size: 100% auto;
    background-repeat:no-repeat; */
    min-height: 650px;
    min-width: 1156px;
    padding:0;
    margin:0;
} 

#col1 {
    float: right;
    width: 5%;
    margin-right: 8%;
    margin-top: 1%;
}

#col2 {
    float: right;
    width: 5%;
    margin-right: 1%;
    margin-top: 1%;
}

#col3 {
    float: left;
    width: 10%;
    margin-left: 8%;
    margin-top: 1%;
}

img.channel {
    float: right;
    height: auto;
    max-width: 100%;
}

.opacity_img {
    opacity: 0.45;
    float: right;
    height: auto;
    max-width: 100%;
}
.opacity_img:hover {
    cursor:pointer;
    opacity: 1.0;
    float: right;
    height: auto;
    max-width: 100%;
}

.container {
    position: relative;
    height: 540px;
    width: 960px;
    overflow: hidden;
    margin-top: auto;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;
    padding-top: 20px;
}

.container a {
    float: left;
    margin: 20px;
}

.big {
    position: absolute;
    top: 160px;
    left: 20px;
}

.big {
    position: absolute;
    top: 900px;
    left: 20px;

    -webkit-transition: top 0.75s ease;
    -moz-transition: top 0.75s ease;
    -o-transition: top 0.75s ease;
    -ms-transition: top 0.75s ease;
    transition: top 0.75s ease;
}

.featured {
    top: 160px;
    z-index: -3;
}

.featured2 {
    top: 160px;
    z-index: 10;
}

.thumb {
    opacity: 0.65;
    float: right;
    height: auto;
    max-width: 100%;
}

a:hover .thumb {
    opacity: 1.0;
}

a:hover .big {
    top: 160px;
}

.erotin {
    float: left;
    background-color:#FFFFFF;
    width: 90%;
    height: 1px;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 1%;
}

【问题讨论】：

你有多个带有id="col2"的元素，这是你想要的吗？
是的，col1 是页面徽标，col2 是所有其他链接，但最右边的链接有更多的边距以使它们居中一点。查看 www.sabulo.com/cnop 了解成品。

标签： firefox html layout liquid

【解决方案1】：

原因是 .container 没有清除上面元素的浮动。

将 clear:both; 添加到 css 中的 .container -block 然后它在 ff 中工作；）

【讨论】：

谢谢，一小行代码修复了它！我不知道清除浮动，但现在我知道了。