Question

我的网页在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%;
}

Answer 1

原因是，.container不会清除上面元素的浮动。

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

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

1 个答案: