마크업개발 메모장

사파리에서 깨지는 레이아웃 잡기 본문

HTML/CSS

사파리에서 깨지는 레이아웃 잡기

parra 2014. 8. 27. 11:02

크롬, ie, 파폭, 안드로이드에서는 문제없이 보이는데 사파리에서만 레이아웃이 틀어지는걸 발견했다. ㅠㅠ

멘붕멘부우ㅜ

       

위에 떠있는 놈에 overflow:hidden;을 주니까 제대로 나왔다!! 이렇게 되면 원인은... 높이값을 정해주지 않아서인것같다...
맞는지는 아직 잘모르겠다. 앞으로 더 연구해봐야지ㅠㅠ

이 덕에 사파리는 꼭 아이폰 기기에서 한번 더 확인 해야겠다는 깨달음을 얻었다....^_T



+ 내용 추가 )

공부하다 보니 이것은 이미 float으로 레이아웃을 잡아줄때 많이 사용되는 방법이었다.

overflow :hidden; , overflow :auto; 둘다 사용해도 별 문제 없는 것 같다.

나만 몰랐다....ㅠㅠ 혼자서 작업하다보니 조금 느리게 습득하는 것도 있지만 어쨋든 스스로 해결하는게 뿌듯하다....또르르...


나같은 사람들에게 유용한 정보를 주고싶어 예제를 만들어봤다.

아래 예제소스보러가기를 누르면 어떻게 적용되는지 한눈에 알 수 있을것이다. 

거 아니지만 그래도 유용할지도...모르니 꾸준히 예제를 만들것이다!!! 퐈이야~


예제소스보러가기!!


앞으로 유용하게 써야지~!! :)



'HTML/CSS' 카테고리의 다른 글

CSS3 animation를 이용한 이미지 움직이기  (0) 2014.11.19
CSS3 transition 속성  (0) 2014.11.17
푸터 하단 고정방법  (0) 2014.08.28
html태그 <u>l과 <ol>의 차이점  (0) 2013.02.06
나눔고딕 웹폰트 사용하기  (0) 2013.02.04