NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


IE6 bug : Horizontal scroll bar in frame.

본문 건너 뛰기

IE6에서 아이프레임(iframe) 또는 프레임셋(frameset) 문서에 의도하지 않은 수평 스크롤바를 발생시키는 버그 입니다. 아래 보시는 이미지는 좌우측 동일하게 표준 DTD를 사용한 문서를 프레임으로 출력할 때 IE6 브라우저의 프레임이 어떻게 스크롤바를 발생시키는지 보여주고 있습니다. 좌측은 내용이 넘치지 않지만 우측은 내용이 넘친다는 점만 다르고 프레임 scrolling 속성의 값은 기본값인 "auto" 입니다.

IE6에서 버그가 발생하는 장면.

버그가 발생하는 상황.

  1. 프레임에 포함될 자식 문서에 표준 DTD(HTML 4.01 ST, XHTML 1.0 ST)를 사용. 부모 문서의 DTD는 관계 없음.
  2. 자식 문서의 내용이 프레임의 수직 크기를 초과할 때 수직 스크롤바 발생.
  3. 이 때 생기지 않아야 할 수평 스크롤바가 동시 발생.

잘못된 문제 해결 방법.

  1. 프레임의 scrolling 속성을 "no" 으로 바꿈 : 자식 문서의 내용이 넘칠 경우 보이지 않는 영역의 탐색이 불가능 해진다.
  2. 프레임에 포함될 자식 문서의 DTD를 제거 : Quirks Mode 렌더링을 유발하기 때문에 브라우저 호환성 작업이 어려워지게 된다.

적당한 문제 해결 방법.

  1. 프레임의 scrolling 속성을 "yes" 으로 바꾸면 IE6에서 더 이상 수평 스크롤바가 발생하지 않는다.

이 대안의 단점.

  1. IE를 비롯한 모든 브라우저들은 scrolling 속성이 "yes" 일때 자식 문서의 내용이 넘치지 않아도 ‘수직‘ 스크롤바 자리를 무조건 표시한다.
  2. Opera, Firefox 브라우저는 scrolling 속성이 "yes" 일때 자식 문서의 내용이 넘치지 않아도 ‘수직 및 수평‘ 스크롤바 자리를 무조건 표시한다.
  3. Safari, Chrome 브라우저는 scrolling 속성이 "yes" 일때 자식 문서의 내용이 넘치지 않아도 ‘수직‘ 스크롤바 자리를 무조건 표시한다.

테스트용 예제.

테스트 예제를 제대로 활용하려면 IE6 및 다양한 브라우저를 이용하여 이 문서를 보세요. 이 예제를 새 창에서 보기. 좌측에 있는 프레임은 내용이 넘치지 않는 프레임이고 우측에 있는 프레임은 내용이 넘치는 프레임 입니다.

No DTD & scrolling="auto"

Standard DTD & scrolling="auto"

Standard DTD & scrolling="yes"

분류: 웹 표준 | 2009년 4월 10일, 7:32 | 정찬명 | 댓글: 12개 |
트랙백URI - http://naradesign.net/wp/2009/04/10/763/trackback/

12개의 댓글이 있습니다.

  1. 용균 댓글:

    예제를 한참 보면서 왜 가로 스크롤이 안보이지? 생각했는데 ie7이었습니다. […]

  2. 나에 댓글:

    크롬이라 가로 스크롤 안생겨요 -ㅁ-

  3. 정찬명 댓글:

    와~ 정말 좋은 브라우저들을 사용하고 계시는군요. ㅎㅎㅎ.

  4. 윤좌진 댓글:

    그래서 프레임 셋을 사용해야 할 경우엔 이렇게 구분지어서 사용하는게 좋죠 ㅋㅋ
    [!–[if IE]]
    [frame src=”http://” scrolling=”yes” /]
    [![endif]–]

    [!–[if !IE]–]
    [frame src=”http://” /]
    [![endif]]
    [/frameset]

    그나저나 이제 옷 입으시죠? ㅎㅎ;

  5. 정찬명 댓글:

    역시 윤좌진! ㅎㅎㅎ

  6. 김일규 댓글:

    필터링에 의한 피해사례속출;;

  7. 황준상 댓글:

    와..좋은글 감사합니다.

  8. […] NARADESIGN:BLOG 의 포스트 제목을 그대로 채용한 […]

  9. 정찬명 댓글:

    따라쟁이님 트랙백 감사합니다. 상황에 따라서 유용할 수 있겠네요. ^^;

  10. 박경희 댓글:

    제가 팝업에 들어가는 내용이 길어져서 어느높이 이상이면 스크롤생기게했는데요.
    IE에서 타이틀 부분이 스크롤이 안되네요. 방법이 없나요?

    css에는
    .pop_agree03 {padding:0 10px 0 0;
    width:730px;
    height:650px; overflow-y:auto;
    scrollbar-face-color: #f0f0f0;
    scrollbar-shadow-color: #f0f0f0;
    scrollbar-highlight-color: #fff;
    scrollbar-3dlight-color: #d1dce2;
    scrollbar-darkshadow-color: #d1dce2;
    scrollbar-track-color: #fff;
    scrollbar-arrow-color: #ababab;}

    내용에는

    개인정보

    .
    .
    .

    대략 이렇게 넣었는데요.
    개인정보
    이부분이 스크롤이 안되고 고정되어있네요.
    아이프레임르로 해야하는건가요?

  11. 정찬명 댓글:

    @박경희
    이 코드만 봐서는 문제 상황을 확인하기 어렵습니다. URL을 알려주시면 한번 볼께요.

  12. 치프 댓글:

    안녕하세용~
    아 iframe 익스6 가로스크롤바때문에 왔는데 덕분에 해결했네여~
    감사합니당.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님