익스와 다른 브라우저의 차이.. 조언좀 해주세요 정보
익스와 다른 브라우저의 차이.. 조언좀 해주세요
본문
http://wkaak105.hubweb.net/sexy/test.html
위 사이트에 div로 제 맘대로 레이아웃을 만들어봤습니다
사실 현x카드 메인페이지와 비슷하게 만들어보려 했다가.. 귀찮아서 이렇게 만들었는데
문제는..
익스8~9에서 볼때 완전 이상하게 망가지고 난리나네요.
크롬이나 그런데서는 정상적으로 나오구요.. 뭐가문제일까요
조언좀 주시면 감사하겠습니다
위 사이트에 div로 제 맘대로 레이아웃을 만들어봤습니다
사실 현x카드 메인페이지와 비슷하게 만들어보려 했다가.. 귀찮아서 이렇게 만들었는데
문제는..
익스8~9에서 볼때 완전 이상하게 망가지고 난리나네요.
크롬이나 그런데서는 정상적으로 나오구요.. 뭐가문제일까요
조언좀 주시면 감사하겠습니다
댓글 전체
웹표준코딩을 권장합니다
css에 대해 조금 더 공부해 보시면 알게 되시는 문제입니다
일단 테이블로 따지자면 구조가 브라우져 별로 조금씩의 차이가 있고 css가 먹히는게 있고 먹히지 않는게 있습니다
왜 이렇게 만들었는지 개발자의 의도는 알 수 없으나 어쩌겠어요 만들어진 것에 맞춰야지요
각 브라우져별로 간단한 확인은 padding:1px 10px 5px 3px 했을시 모두 똑같이 나오지가 않는다는 것이겠지요
그래서 웹표준코딩이 존재하는 것이고요
일단 테이블로 따지자면 구조가 브라우져 별로 조금씩의 차이가 있고 css가 먹히는게 있고 먹히지 않는게 있습니다
왜 이렇게 만들었는지 개발자의 의도는 알 수 없으나 어쩌겠어요 만들어진 것에 맞춰야지요
각 브라우져별로 간단한 확인은 padding:1px 10px 5px 3px 했을시 모두 똑같이 나오지가 않는다는 것이겠지요
그래서 웹표준코딩이 존재하는 것이고요
Padding 은 동일하게 나와요 다른 속성들 때문에 발생하는 문제에요
사용하신 CSS 속성을 보면 box-sizing 같은 CSS3 속성을 주신게 가장 큰 문제 같네요. box-sizing 은 IE 에서 아직 지원하지 않는 속성이므로 IE 에서 깨져 보일 수 있습니다. (IE 9버전이나 8버전은 어떤지 모르겠네요)
이때문에, border 속성 준것이 IE 에서 box 크기 자체에 영향을 미치게 되어서 레이아웃이 흐트러지는거 같습니다. 다른 부분은 아직 살펴 보지 않아 다른곳에도 문제가 있는지는 모르겠군요.
이때문에, border 속성 준것이 IE 에서 box 크기 자체에 영향을 미치게 되어서 레이아웃이 흐트러지는거 같습니다. 다른 부분은 아직 살펴 보지 않아 다른곳에도 문제가 있는지는 모르겠군요.
감사합니다
각 div의 패딩을 지우고서도 문제가 있었는데
after에 border-box 를 지우니 ie에서도 정상적으로 결과값이 나오네요 감사합니다 ㅎ
각 div의 패딩을 지우고서도 문제가 있었는데
after에 border-box 를 지우니 ie에서도 정상적으로 결과값이 나오네요 감사합니다 ㅎ