我的网页在 Chrome 和 IE 上运行正常，但在 Firefox 上运行不正常。我使用带有缩放按钮和 float div 的液体布局。目前，内容 slider 应该位于页面中间(就像在 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%;
}
最佳答案
原因是.container没有清除上面元素的 float 。
将 clear:both; 添加到 css 中的 .container block ，然后它就可以在 ff 中工作;)
关于firefox - float div 在 Firefox 中无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21603177/