파이어 폭스 화면
익스플로러 화면
이번에 소스 코딩하면서 느낀것은 익스플로러와 파이어 폭스와의 table이라든지 div등에 쓰이는 width의 관계값이 다르다는것이다.
파이어 폭스의 경우 width값은 글이 들어갈 자리의 넓이가 되고
익스플로러의 경우엔 width값이 padding을 포함하고 있다.
즉, 패딩값만큼 빼야지 글이 들어갈 자리의 넓이가 되는것이다.
이 방법은 책읽다가 찾은것인데 .css에 적용하면 된다고 들었다.
#header {
margin:0;
padding:10px;
text-align:center;
width:980px; /* IE용 */
voice-family: "\"}"\";
voice-family: inherit;
width:1000px; /* 실제값 */
}
html>body #header {
width:1000px;
}
무슨 핵이라고 불리는데 이름은 잘 모르겠다. -.-;
위의 코드를 보면 실제값은 파이어 폭스나 기타 브라우져용이고
IE용은 따로 계산해서 넣어줘야 한다..
padding:10px 해줬으니 상우하좌 순로 10px씩 패딩이 걸린다.
width는 그러므로 10px + 10px = 20px 여기에 980px을 더하면 1000px 이 된다.
물론 근본적인 해결방법이 아니다.
익스플로어 7.0에선 해결이 되었으면 하는 바램인데;;;