초보입니다ㅠㅠ html,css 질문입니다
본문
아래는 제가 쓴 html 과 css 소스입니다.
<style>
#step2 {
background-color:#7ddcd8;
width:100%;
height:auto;
overflow:hidden;
margin:0 auto;
padding-top: 70px;
}
#step2 .inner {
width:100%;
max-width:900px;
height:auto;
margin:0 auto;
overflow:hidden;
}
#step2 .inner img{
width:100%;
max-width:900px;
height:auto;
margin:0 auto;
overflow:hidden;
}
#step2 .iframe1 {
position:absolute;
left:50%;
top:50%;
margin-left:-390px;
margin-top:150px;
z-index:99;
overflow:hidden;
}
</style>
<body>
<div id="step2">
<div class="inner">
<img src="img/step2.gif" alt="" border="0" />
</div>
<div class="iframe1">
<iframe width="800" height="550" src="" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
</div>
</div>
</body>
답변 1
top에 % 속성을 주니 브라우저마다 달라보일수밖에요.
근본적인 해결 방법은 이미지를 상단부, 하단부로 자르는 것입니다. 이 방법이 가장 좋구요.
차선책으로는 top % 속성을 뺴시고, margin-top역시 빼시구요. top에 적절한 픽셀을 넣어서 아래로 보내세요. 개발자 도구에서 하나씩 해보시면서 확인하시면 어느정도 넣어야 하는지 감이 오실겁니다. 이렇게 픽셀로 지정해버리면 브라우저마다 차이가 생기지 않습니다.