문제

위치 : Internet Explorer 6에서는 작동하지 않는 수정 6. Google에서 발견 된 수정 사항을 실제로 이해할 수 없습니다. IE6, IE7, IE8 & FIREFOX 3.0에서 작동해야합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    <title>Sidebar fixed</title>
    <style type="text/css">
    #wrapper {
        position:relative;
        width:900px;
        margin:0 auto 0 auto;
    }
    #sidebar_left {
        position:fixed;
        height:200px;
        width:200px;
        border:1px solid #000;
    }
    #sidebar_right {
        position:fixed;
        height:200px;
        width:200px;
        margin-left:700px;
        border:1px solid #000;
    }
    #content {
        position:absolute;
        height:2000px;
        width:480px;
        margin-left:210px;
        border:1px solid #000;
    }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="sidebar_left">
            <p>Left sidebar</p>
        </div>
        <div id="sidebar_right">
            <p>Right sidebar</p>
        </div>
        <div id="content">
            <p>This is the content</p>
        </div>
    </div>
</body>
</html>
도움이 되었습니까?

해결책

IE6을 지원하지 마십시오! 사람들이 IE6에 대한 해킹 사이트를 빨리 멈출수록 견인력이 줄어들고 더 빨리 죽을 것입니다! 또는 첫 번째 스타일 블록 후이 코드를 추가하십시오.

<!--[if IE 6]>  
<style type="text/css">  
#sidebar_right, #sidebar_left {  
position:absolute; /* position fixed for IE6 */  
top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');  
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');  
}  
</style>  
<![endif]-->

결과는 매우 매끄럽지는 않지만 작동합니다.

업데이트

나는 이것이 어떻게 사용되어야하는지 너무 명확하지 않았다. 위의 블록의 시작 부분에서 "위치 : 수정"이있는 모든 요소의 ID (또는 클래스)를 추가하면 IE6에서 스스로 행동합니다.

다른 팁

예, 즉 짜증나. 여기에 해킹이 있습니다 ...

_position: absolute;
_top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');

그것은 기본적으로 IE6에게 스크롤하더라도 왼쪽 상단에 절대적으로 위치하도록 지시합니다. 이것은 요소에 대한 나머지 CSS 아래로 가야하므로 IE6에서 오버 라이딩합니다.

여기는 왼쪽 막대를위한 것입니다 ...

#leftBar {
position:fixed;
top:0;
left:0;
width:200px;
_position:absolute;
_top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}

나는 방금 Ietester의 IE6 버전에서 이것을 테스트했으며 훌륭하게 작동했고 ... 지터, 우, 우!


예를 들어 상자 클래스가있는 요소가 있다고 가정 해 봅시다.

.box {
    position: fixed;
    top: 0px;
    left: 0px;
}



개구부를 교체하십시오 <HTML> 조건부 IE 문의 태그 ...

<!--[if IE 6]> <html id="ie6"> <![endif]-->

그리고

<!--[if !IE]--> <html> <!--[endif]-->

그런 다음 좋아합니다 MATW & 미치브리슨 고정 된 위치를 시뮬레이션하기 위해 제안 된 '표현'을 사용합니다.

참고 :이 코드는 CSS에서 원래 요소의 스타일을 따라갑니다.

#ie6 .box { 
    position: absolute;
    top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
    left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}



문제는 모든 페이지에서 요소를 스크롤하면 요소가 지터가되면 보상하는 한 가지 방법입니다 ...

참고 :이 코드는 CSS에서 CSS에서 또는 CSS의 스타일 'HTML {}'후에 진행됩니다. 

#ie6 {
    background-image:url(about:blank);
    background-attachment:fixed;
}

에 따르면 토마스 아일 로트 @ sumtlegradient.com,

"... 페이지가 다시 그려지기 전에 CSS의 처리를 강요합니다. 다시 그리기 전에 CSS를 다시 처리하기 때문에 다시 그리기 전에 CSS 표현식을 처리 할 것입니다. 이는 완벽하게 부드러운 위치 고정 요소를 제공합니다!" "

기사 링크 : http://subtlegradient.com/articles/2009/07/29/css_position_fixed_for_ie6.html

예를 들어, 모두 함께 ...

<!--[if IE 6]> <html id="ie6"> <![endif]-->
<!--[if !IE]--> <html> <!--[endif]-->

<HEAD>
<STYLE>

#ie6 {
   background-image:url(about:blank);
   background-attachment:fixed;
}
.box {
   position: fixed;
   top: 0px;
   left: 0px;
}
#ie6 .box { 
   position: absolute;
   top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
   left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}

</STYLE>
</HEAD>

<BODY>
    <div class="box"></div>
</BODY>

</HTML>

내가 조정 한이 솔루션을 발견했습니다 (기본적으로 변경 한 줄은 $ ( '#sidebar_left'). css ( 'top', document.documentelement.scrolltop);) :

// Editing Instructions
// 1. Change '#your_div_id' to whatever the ID attribute of your DIV is
// 2. Change '175' to whatever the height of your header is, if you have no header, set to 0

/********************************
*   (C) 2009 - Thiago Barbedo   *
*   - tbarbedo@gmail.com        *
*********************************/
window.onscroll = function()
{
    if( window.XMLHttpRequest ) {
        if (document.documentElement.scrollTop > 299 || self.pageYOffset > 299 && document.documentElement.scrollBottom > 100) {
            $('#sidebar_left').css('top',document.documentElement.scrollTop);
            $('#sidebar_right').css('top',document.documentElement.scrollTop);
        } else if (document.documentElement.scrollTop < 299 || self.pageYOffset < 299) {
            $('#sidebar_left').css('top','299px');
            $('#sidebar_right').css('top','299px');
        }
    }
}

그것은 지저분하고 나쁘게 보이지만 IE6을 포함한 모든 브라우저에서 작동합니다.

나는 최근에 jQuery 플러그인을 작성하여 위치를 얻기 위해 : IE 6+에서 작업을 고정했습니다. 그것 그렇지 않습니다 Scroll의 지터는 기능 (사용자 에이전트가 아님)을보고 인터넷 익스플로러 6, 7, 8에서 작동합니다.

IE7+ 위치에서 엄격한 모드를 사용하는 경우 : 고정이 명예 롭지 만 기본적으로 IE7+는 Quirks 모드에서 작동합니다. 이 플러그인은 브라우저 기능을 확인하고 위치를 존중하지 않으면 고정 된 경우 jQuery 수정을 구현합니다.

http://code.google.com/p/fixedposition/

이와 같은 것이 당신에게 효과가있을 수 있습니다.

$(document).ready(function(){
   $("#chatForm").fixedPosition({
      debug: true,
      fixedTo: "bottom"
   });
});

코드에서 작동하기 위해 약간의 CSS 조정을해야 할 수도 있습니다. 나는 우리가 말하는대로 옵션으로 "오프셋"값을 연구하고 있습니다.

CSS 표현식으로 수행 할 수는 있지만 부드러운 스크롤을 얻기 위해 여분의 해킹이 있습니다.

html, body {
    _height: 100%;
    _overflow: hidden
}
body {
    _overflow-y: auto
}
#fixedElement {
    position: fixed;
    _position: absolute; / ie6 /
    top: 0;
    right: 0
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top