IE6 position fixed

IE6을 위한 fixed 포지션의 구현은 CSS expression을 사용한 방법, 자바스크립트를 이용하는 방법등이 있습니다. CSS만으로 이를 구현하기도 했는데 정확히 테스트를 못해봤고 관련해서 제약이 있었던걸로 압니다. 최근에는 IE6을 대비할 일이 없겠지만 기록은 남겨둡니다.

IE6 전용 핵 사용

출처 : http://naradesign.net/wp/2007/09/08/128/

CSS에는 position:fixed 라는 속성이 존재하고 이 속성이 부여된 엘리먼트는 화면에 고정되어 스크롤을 해도 움직이지 않고 항상 같은 자리에 머물게 됩니다. 흔히 "스크롤을 따라다니는 배너" 라고 표현하는 이런 UIO(User Interface Object) 따위를 코딩할 때 이 속성을 사용할 수 있는데 보통의 경우 IE6에서 지원하지 않기 때문에 별도의 자바스크립트를 추가하여 이 기능을 구현해 왔습니다. 하지만 이제는 더이상 그럴 필요가 없을것 같습니다. 자바스크립트는 전혀 사용하지 않고 CSS Hack을 사용하여 IE6 에서 position:fixed 상태의 레이어를 구현할 수 있는 팁을 발견하였습니다.

데모보기

<div id="content">
  <h1>Fixed Layer Hack for IE6</h1>
</div>

<div id="aside">
      <h2>Example</h2>
</div>

이 팁의 핵심은 <html> 요소에서 발생하는 스크롤을 제거하고 <body> 요소에 스크롤을 부여하는 것. body 요소로부터 발생한 스크롤은 html 요소를 offset(x,y) 기준점으로 삼고 있는 #aside 요소의 화면배치에 아무런 영향을 주지 않는다.

* { margin:0; padding:0;} /* html, body 사이의 간격을 제거 */
html { _overflow:hidden;} /* 기본 스크롤 제거 */
body{ _height:100%; _width:100%; _overflow:auto;} /* 대체 스크롤 생성 */
#content { width:580px; height:1000px; margin:20px; padding:10px; background:#eeeeee;}

#aside { 
    position:fixed; 
    _position:absolute; 
    _z-index:-1; 
    left:650px; 
    top:20px; 
    width:100px; 
    height:300px; 
    padding:10px; 
    background:#dddddd;
}

만약 body 요소에 position: relative를 주게 된다면 offset의 기준점이 body가 되기 때문에 레이어를 화면에 고정할 수 없는 상태로 다시 돌아가게 된다. DTD가 Quirks Mode 상태일때는 작동하지 않는다.

발견된 문제점

현재 코드는 IE6 핵으로서 #aside 영역에 _z-index:-1 속성을 사용하였기 때문에 IE6 에서는 #aside 영역의 텍스트를 자연스럽게 드래그 하거나 링크를 클릭할 수 없습니다. 다른 브라우저에서는 발생하지 않는 현상입니다. 한편 _z-index:-1 을 제거하게 되면 텍스트를 드래그 하거나 링크를 클릭하는 것이 가능하지만 화면크기를 줄였을 때 #aside 레이어가 세로 스크롤바를 덮는 현상이 발생합니다. 이 문제 역시 IE6 에서만 발생하는 현상입니다.

Hack없이 position: fixed하기

http://www.cssplay.co.uk/layouts/fixed.html

body{
    height:100%;
    overflow-y:auto;
}

/* Fixed 할 Element */
.fixed_div{
    position:absolute;
}

좀더 자세히...
http://css-tricks.com/snippets/css/fixed-positioning-in-ie-6/

* { margin:0; padding:0; }
html, body {
   height: 100%;
}
body #fixedElement {
   position:fixed !important;
   position: absolute; /*ie6 and above*/
   top: 0;
   right: 0;
}
#page-wrap {
    width: 600px;
    margin: 0 auto; 
    font: 16px/2 Georgia, Serif;
}

The 100% height on the body and html stuff is in case you want to do fixed positioning along the bottom edge of the browser window.

Reference URL

fixed positioning (ie6 hack) - CSS expression Used

http://www.css-101.org/fixed-positioning/05.php

Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport. For continuous media, fixed boxes do not move when the document is scrolled. In this respect, they are similar to fixed background images. For paged media (where the content of the document is split into one or more discrete pages), boxes with fixed positions are repeated on every page. This is useful for placing, for instance, a signature at the bottom of each page. Boxes with fixed position that are larger than the page area are clipped. Parts of the fixed position box that are not visible in the initial containing block will not print.

How to mimic position:fixed in Internet Explorer 6:

css expression을 사용한다

/* 
 * there is no need to use a real image here
 * anything will do :) 
 */
 
 * html {
   background: url(css-101);
 } 

 #footer {
   position: fixed;
   bottom: 0;
   _position: absolute;
   _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') 
	 ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) 
	 : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
 }

Be aware that CSS expressions are evil.

기본 마크업은 아래와 같다.

<div id="fixed">This box is fixed.</div>
<div id="scrollable">
     <div id="doc">This box will scroll.</div>
</div>

html, 
body {
     padding:0;
     margin:0;
     _padding:0 1px;
     _height:100%;
     _overflow:hidden;
}
#scrollable {
     _height:100%;
     _width:100%;
     _overflow:auto;
}
#fixed {
     right:25px;
     position:fixed;
     _position:absolute;
}

Be aware that this approach may lower the semantic of your document.

'웹개발론 > 크로스브라우징' 카테고리의 다른 글

Selectivizr - CSS3 선택자 크로스브라우징 (0)	2015.05.19
IE7.js - HTML5 요소 및 CSS 선택자 크로스브라우징 (3)	2015.05.18
HTML5 Shiv - HTML5 요소 크로스브라우징 (3)	2015.05.18
폴리필(polyfill) (3)	2015.05.15
HTML5 기능 감지 - 수동 (0)	2015.04.17

WEBDIR