1
내 웹 페이지 (http://cnopmedia.tk)는 크롬과 IE에서 제대로 작동하지만 파이어 폭스에서는 작동하지 않습니다. 저는 스케일링 버튼과 부동 div와 함께 액체 레이아웃을 사용하고 있습니다. 현재 콘텐츠 슬라이더는 페이지 중간에 있어야합니다 (예 : Chrome 및 IE). 그러나 Firefox에서는 다른 버튼 위로 이동합니다. 내 코드에 무슨 문제가 있습니까?Firefox에서 플로팅 div가 제대로 작동하지 않습니다.
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%;
}
감사합니다!
)
다음은 FF에서 일하고는 CSS에서 .container의 - 블록에
clear:both;를 추가? – Kitet예, col1은 페이지 로고입니다. col2는 다른 모든 링크이지만 오른쪽 가장자리에는 약간의 오차가있는 여백이 있습니다. 완제품에 대해서는 www.sabulo.com/cnop을 확인하십시오. – Cnop