일반 블럭을 디자인할 때 IE 와 FF 의 차이 (블럭의 사이즈 및 위치)

황제낙엽 2009.06.27 15:06 조회 수 : 670 추천:95

sitelink3 http://1 
sitelink4 http://ko 
extra_vars5 http://glotalk.egloos.com/1111105 
extra_vars6 sitelink1 
웹 문서를 만들 때마다 IE와 FF의 차이로 인해서 곤혹스럽다. 그럴 때마다 한 번쯤 검토, 정리 해야겠다는 생각을 해보지만 역시나 귀차니즘 때문에 미뤄왔다. 하지만 계속되는 시간낭비로 더 이상 미룰 수만은 없다는 생각에 인터넷에서 수집한 자료들과 실험을 통해 그 동안의 숙제였던 IE와 FF의 랜더링의 차이에 대해 정리해 보려한다.

이 문서는 지속적으로 수정, 보완할 예정이다.
한번에 다 쓰려니 검토할 사항이 많아서 틈나는 대로 조금씩 작성하려고 한다.

실험방법
3개의 블럭을 다음과 같이 배치하고 각 블럭의 CSS Style을 정의한 후 값을 바꿔가면서 IE와 FF에서 확인하는 방식으로 진행하였다.

버전정보
MSIE: 6.0.2900    FF: 2.0.0.11

실험에 사용된 소스 div style="padding: 8px; border-left: #c1c1c1 1px solid; border-right: #c1c1c1 1px solid; border-top: #c1c1c1 1px solid; border-bottom: #c1c1c1 1px solid; background-color: #f2f2f2; font-family: Courier New; font-size: 10pt; line-height: 1.2em;"
HTML:

<div id="container">
    <div class="box1">
        <span style="background-color: blue">text1 <br />
            text2 </span>
    </div>
    <div class="box2">
        <span style="background-color: blue">text1 <br />
            text2 </span>
    </div>
</div>

CSS:

body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
#container {
    font-family: 굴림;
    font-size: 9pt;
    color: #a8a8a8;
    text-align: left;

    background-color: #f5f5f5;
    float: none;

    border-top: #aaaaaa 8px solid;
    border-right: #aaaaaa 8px solid;
    border-bottom: #aaaaaa 8px solid;
    border-left: #aaaaaa 8px solid;

    width: 240px;
    height: 240px;

    margin: 0px 0px 0px 0px;
    padding: 4px 4px 4px 4px;
}
#container div.box1 {
    border-top: #cccccc 8px solid;
    border-right: #cccccc 8px solid;
    border-bottom: #cccccc 8px solid;
    border-left: #cccccc 8px solid;

    margin: 8px 8px 8px 8px;
    padding: 0px 0px 0px 0px;
}
#container div.box2 {
    border-top: #cccccc 8px solid;
    border-right: #cccccc 8px solid;
    border-bottom: #cccccc 8px solid;
    border-left: #cccccc 8px solid;

    margin: 16px 16px 16px 16px;
    padding: 8px 8px 8px 8px;
}


----------------------------------------------------------------------------- 첫번째

문서상단에 다음 <!DOCTYPE>의 유무에 따라 결과가 달라졌다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

위의 <!DOCTYPE>을 기입하지 않으면

위의 <!DOCTYPE>을 기입하면


[결과]
<!DOCTYPE>을 기입하지 않으면
IE는 width와 height에 border-width와 padding을 포함하고(margin은 포함하지 않음)
FF는 width와 height에 border-width와 padding을 포함하지 않는다.

<!DOCTYPE>을 기입하면
IE는  기입하지 않았을 때에 비해 FF의 랜더링에 상당히 근접한 결과를 보여 주었다.
FF는 기입하지 않았을 때와 동일한 결과를 보여 주었다.
width, border-width 그리고 padding의 관계가 IE와 FF에 대해 동일한 결과를 보여 주었다.


----------------------------------------------------------------------------- 두번째

실험에 사용된 소스에 스타일을 추가 또는 변경하면서 변화를 관찰했다.

기본 스타일 (수정하기 전)



동일한 문서를 IE와 FF에서 각각 보았을 때 폭과 높이를 지정한 conatiner의 경우는 같은 크기를 보여주지만
그 안에 포함된 box1과 box2는 내부의 텍스트의 높이를 다르게 해석해서인지 서로 다른 높이를 보여준다.

수평방향으로는,
IE, FF 둘 다 container padding 4px과 box1 margin 8px의 합인 12px의 간격을 보여준다.
수직방향으로는,
IE의 경우, container padding 4px과 box1 margin 8px중 큰 값인 8px의 간격을 보여주지만
FF의 경우, container padding 4px과 box1 margin 8px의 합인 12px의 간격을 보여준다.

box1과 box2의 간격을 보면,
IE, FF 둘 다 box1 margin 8px과 box2 margin 16px중 큰 값인 16px의 간격을 보여준다.

border: gray 1px solid;

body {
    margin: 8px 8px 8px 8px;
}



IE, FF 둘 다 수평, 수직으로 8px의 간격을 보여준다.

#container {
    margin: 4px 4px 4px 4px;
}



수평방향으로는
IE, FF 둘 다 body margin 8px과 container margin 4px의 합인 12px의 간격을 보여준다.
수직방향으로는
IE의 경우, body margin 8px과 container margin 4px의 합인 12px의 간격을 보여주지만
FF의 경우, body margin 8px과 container margin 4px중 큰 값인 8px의 간격을 보여준다.

#container {
    margin: 16px 16px 16px 16px;
}



마진의 통합에 대한 실험을 위해 container margin을 body margin 8px보다 큰 값인 16px로 늘려 보면

수평방향으로는
IE, FF 둘 다 body margin 8px과 container margin 16px의 합인 24px의 간격을 보여준다.
수직방향으로는
IE의 경우, body margin 8px과 container margin 16px의 합인 24px의 간격을 보여주지만
FF의 경우, body margin 8px과 container margin 16px중 큰 값인 16px의 간격을 보여준다.

#container {
    float: left;
}



container의 float: none을 float: left로 수정하면,

IE의 경우, 수평방향으로 body margin 8px과 container magin 16px의 두배인 32px의 합인 40px의 간격을 보여준다.
수직방향으로는 변화 없다.
FF의 경우, 수직 방향으로 body margin 8px과 container margin 16px의 합인 24px의 간격을 보여준다.
수평방향으로는 변화 없다.

#container div.box1 {
    float: left;
}



box1에 float: left를 추가하면,

#container div.box2 {
    float: left;
}



box2에 float: left를 추가하면,




[결과]
수평방향에서는 차이가 없다. (CSS2에서 수평 마진들은 절대로 통합되지 않는다.)
수직방향에서는 차이가 있다. (수직 마진들은 박스들 사이에서 통합될 수 있다)
  1. box margin들이 인접한 부분
    FF: 통합된다.  IE: 통합된다.
    box margin과 body margin이 인접한 부분
    FF: 통합된다.  IE: 통합되지 않는다.
  2. box margin과 box padding이 인접한 부분
    FF: 통합되지 않는다.  IE: 통합된다.
    box margin과 body padding이 인접한 부분
    FF: 통합되지 않는다.  IE: 통합된다.
  3. float된 box margin과 인접한 부분
    FF: 통합되지 않는다.  IE: 통합되지 않는다. 수평방향으로 마진이 두배가 되는 버그 있다.
(주의) "통합된다"는 뜻은 두 개의 박스가 인접해 있을 때 각 박스의 마진 중 큰 값을 두 박스의 간격으로 한다는 뜻이다. 모 사이트의 글을 보니 이것을 "포개진다"는 말로 표현하고 있었다. 더 쉽게 의미가 와 닿는 것 같다.


-----------------------------------------------------------------------------
세번째

[기타 ]
padding-top을 0으로 했을 때 텍스트의 세로방향의 시작 위치가 다르다. (1px 정도)
------------------------------------------------------------------------------------------------------------------------------
텍스트의 background-color을 지정해서 보면 동일한 폰트임에도 IE와 FF간에 배경으로 칠해지는 영역의 높이가 다르다. (1px정도)
line-height를 기입하지 않으면 줄간격이 IE와 FF간에 서로 틀리다. (line-height를 지정하면 같아진다)
------------------------------------------------------------------------------------------------------------------------------
<span style="background-color: blue">text1 <br />text2 </span>
IE에서는 "text1" "text2"에 대해 배경이 파란색으로 칠해지지만 FF의 경우는 "text1 " "text2"에 대해 배경이 파란색으로 칠해진다.
IE와 FF에 대해 동일하게 배경이 파란색으로 칠해지도록 하려면 다음과 같이 해주면 된다.
<span style="background-color: blue">text1 <br />text2 </span>
------------------------------------------------------------------------------------------------------------------------------

References

Sites Q&A
출처:CSS, IE와 FF의 차이
이 게시물을
목록
번호 제목 글쓴이 날짜 조회 수
128 Web Speech API Example (HTML5 STT & TTS) file 황제낙엽 2025.04.14 731
127 모바일과 데스크톱을 포괄하는 사용자의 터치 이벤트(onPointerTap) 황제낙엽 2025.04.09 648
126 Web RTC 에 관하여 황제낙엽 2024.11.20 626
125 div와 span의 차이점 (from Bing) 황제낙엽 2023.06.16 685
124 flexbox (flexible box layout) 황제낙엽 2023.02.27 641
123 characters from ISO 8859-1 황제낙엽 2020.11.10 36946
122 HTML FRAMESET 태그 예제 황제낙엽 2020.11.06 718
121 스마트 기기에서 여러 단말기의 해상도에 대응하기 위해 사용하는 HTML viewport meta tag 황제낙엽 2020.11.06 644
120 네이버의 무료 나눔 글꼴 황제낙엽 2020.05.06 1762
119 서버의 이미지나 txt 파일을 웹브라우저에서 다운로드하기 황제낙엽 2019.05.13 867
118 When to encode space to plus (+) or %20? (application/x-www-form-urlencoded) 황제낙엽 2019.04.15 917
117 HTTP/2 소개 황제낙엽 2018.10.12 693
116 글자, 문자, 텍스트, 글꼴, 서체, 폰트와 관련한 속성들 / font-size , 크기 단위(em, px, pt, rem), 절대 단위, 상대 단위 황제낙엽 2018.04.18 842
115 Pragma와 Cache-Control 황제낙엽 2018.03.28 845
114 로드밸런싱(L4)+아파치를 운영시 etag제거로 캐시 성능 최적화 file 황제낙엽 2018.03.28 944
113 HTTP 요청 헤더 III - If-Match, If-Modified-Since, If-None-Match file 황제낙엽 2018.03.27 726
112 재미난 로그인 페이지 만들기 file 황제낙엽 2018.03.26 1592
111 HTTP Cache-Control 요청 지시어 황제낙엽 2018.03.09 713
110 내 웹사이트의 속도를 빠르게! file 황제낙엽 2018.03.07 859
109 성능을 위한 초간단 HTTP 304 Not Modified 구현 방법 file 황제낙엽 2018.03.07 816
쓰기 태그