1
我的網頁（http://cnopmedia.tk）在Chrome和IE上正常工作，但在Firefox上無法正常工作。我正在使用縮放按鈕和浮動div的液體佈局。目前，內容滑塊應該位於頁面中間（就像在Chrome和IE中），但在Firefox上，它會跳轉到其他按鈕的頂部。我的代碼有什麼問題？浮動div在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」'，是你打算怎麼辦？ – Kitet
是的，col1是頁面標誌，col2是所有其他鏈接，但最右邊的一個有更多的邊距讓它們居中一點。請訪問www.sabulo.com/cnop查看成品。 – Cnop