ie7에서 혼자 안맞아요ㅠ
아이뻐
body div id=header div id=container div id=profile div id=portfolio div id=skills div id=contact
header는 position:fixed 해서 화면상단에 계속 보이구요해당 버튼을 누르면 (+제이쿼리 써서 스르륵 내려와서 해당div의 top이 맞춰짐)container안에 있는 각 div의 top이 header 밑부분과 딱 와서 맞춰져 보여야하는데ie7에서는 저렇게 보여요ㅠㅠ#header{position:fixed}#container{width:940px; margin:0 auto 200px;} - 마진바텀을 200준것도 ie7에서 전혀 안나타남
그래서 생각한게 #container에 padding-bottom:150px 을 주는건데,hash hack써서 #padding 하면ie7에서 대충 원하는대로 보여져요.(#contact의 padding-bottom이 늘어나서 contact의 height 이 늘어나고,버튼 누르면 header 부분에 와서 제대로 맞춰짐)
근데 css유효성 검사때매ie7 조건주석문으로 따로 뺐더니ie7.css 파일#container{width:940px; background:#e7d19b; margin:0 auto 200px; padding:0 0 150px 0/*ie7*/; }요러케 ie7.css 파일로 따로 뺐어요. 경로오류나 오타없게 하려고 신경썼어요
main.css 파일#header{position:fixed; z-index:100; left:50%; margin:0 0 0 -470px; width:940px; height:80px; background:#fff;}//수정했어요#container{width:940px; margin:0 auto 200px;} #profile{padding-top:80px; padding-bottom:90px; margin:0;} #portfolio{margin:0; width:100%;} #skills{margin:0; width:100%; padding:0 0 30px 0; overflow:hidden;} #contact{margin:0; padding:0 0 90px 0; overflow:hidden;}
이렇게 했는데.. div에 콱 height 줘버리면 쉽게 해결되긴 하지만, height으로 묶어두면 안될거 같아서요..ie7은 마진이나 패딩이 뭔가 다르게 표현되는거같은 공포..
!--[if ie 7] link rel=stylesheet type=text/css href=ie7.css / ![endif]--이렇게 쓰는거 맞죠?ㅠ
정리정리1. 핵으로 해결되는게, 왜 조건주석문은 안되는걸까요?2. 만약 조건주석문 쓸 필요 없이 해결방법이 있다면 어떻게???
ie에서 f12 - 브라우저 문서모드를 ie7로 맞춰서 크로스브라우징 체크했어요.다른부분은 하코사 불타는 검색으로 해결했어요요건 도저히 모르겠어요..왜 조건주석문은 안되는거지.. 걍 핵 써버릴까..하코수다님들 부디도와주서요~
-
팬지
책 다뒤져서 드디어 해결 찾았어요ㅠ 혹시 검색하시다가 저같은 초보분들 도움될까 해서 남겨요. ie7에서 box-model이 달라서, ie7이 호환모드시에 너비가 width와 padding이 합쳐져서 계산되더라구요.ㅠㅠ 그래서 아무리 padding으로 너비를 늘리려고 해도 width값으로 포함되버려서 안먹혀요. 대신 margin을 줘서 너비를 늘려주니 해결됐어요. 답변주신 분께도 감사해요!