IE6 의 position:fixed 문제 와 스크롤 바 에 따라 스크롤 하 는 효과

IE6 의 position:fixed 문제 와 스크롤 바 에 따라 스크롤 하 는 효과
선언:
'[jQuery]IE6 호 환 스크롤 감청'(클릭 하여 링크 열기)에서 IE6fixed 문 제 를 해결 하 는 것 에 대해 언급 했다.구체 적 으로 js 파일 을 도입 하고 스 크 립 트 하 나 를 설명 하 는 것 은 이 div 성명 fixed 포 지 셔 닝 을 위해 해결 하 는 것 이 었 다.처음에 이렇게 하 는 것 은 좋 지 않 았 다.도입 한 자 바스 크 립 트 는 관리 하기 어 려 운 나머지 헤드 성명 에서 자 바스 크 립 트 를 도입 한 다음 에 이 div 에 id 를 설명 하고 그 다음 에 스 크 립 트 에서 성명 을 내 야 겠 어 요.정말 짜증 나 죽 겠 어 요.
position:fixed 를 사용 하면 다음 과 같은 효 과 를 내 고 싶 을 뿐 입 니 다.
기본적으로 position:fixed 는 IE7 이상 의 모든 브 라 우 저 에 문제 가 없습니다.
IE8：

야호 선 파이 어 폭 스:

그러나 IE6 에 position:fixed 속성 이 직접 없 기 때문에 다음 과 같은 효 과 를 내야 합 니 다.

position:absolute 만 사용 할 수 있 습 니 다.css 스타일 에서 실 행 된 javascript 스 크 립 트 를 추가 하여 해결 합 니 다.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Untitled Document</title> 
    <style type="text/css">     
      .fixedbox { 
        background: #69C; 
        height: 60px; 
        width: 100px;         
        position: fixed; 
        bottom: 100px; 
        /*IE6  position: fixed;*/ 
        /*   position: fixed;      ，        */ 
        _position: absolute;         
        _top: expression(eval( 
        document.documentElement.scrollTop + document.documentElement.clientHeight-this.offsetHeight- 
        (parseInt(this.currentStyle.marginTop,10)||0)- 
        (parseInt(this.currentStyle.marginBottom,10)||0))); 
        /*   position: fixed;      ，        */ 
        _margin-bottom:100px;/*    ，   bottom，    margin-bottom，margin-xx   */ 
      } 
    </style> 
  </head> 
  <body> 
    <div style="float:left;width:80%;min-height:100px;"> 
      <p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p> 
      <p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p> 
      <p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p> 
      <p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p>    
    </div> 
    <div style="float:left;width:20%;min-height:100px;"><div class="fixedbox"></div></div> 
    <div style="clear:both"></div>     
  </body> 
</html>

상기 코드 는 IE6 의 스타일 에 대해 앞 에, 를 추가 하 였 습 니 다.의 부분 은 IE6 의 특정한 재 작성 스타일 성명 입 니 다.구체 적 으로 는 CSS 스타일 에 관 한 것 입 니 다!important、*、_기호(클릭 하여 링크 열기)
실제로 IE6 에서 다음 과 같은 CSS 는


.fixed{ 
  position: absolute;        
  top: expression(eval( 
    document.documentElement.scrollTop + document.documentElement.clientHeight-this.offsetHeight- 
    (parseInt(this.currentStyle.marginTop,10)||0)- 
    (parseInt(this.currentStyle.marginBottom,10)||0))); 
}

다른 브 라 우 저 와 같은 값:


.fixed{ 
  position: fixed; 
}

물론 IE6 에서 position:fixed 를 실현 하 는 CSS 는 일부 브 라 우 저 에서 정상 적 이지 않 을 수 있 으 므 로 각 스타일 앞 에 밑줄 을 그 을 수 있 습 니 다.IE6 에서 만 실 행 됨 을 나타 낸다.
또한 IE6 는 위 와 같은 스타일 이 있어 야 합 니 다.다른 브 라 우 저 처럼 right,top,left,bottom 으로 위 치 를 정 하지 말고 margin-bottom,margin-left,margin-right 로 position:fixed 의 div 위 치 를 설정 합 니 다.
div 의 위 치 를 조절 할 때 주의해 야 합 니 다.상기 IE6 를 호 환 하 는 CSS 는 top 의 속성 을 이용 하기 때문에 margin-top 을 설정 하 는 것 은 소 용이 없습니다.이 div 가 움 직 일 때 브 라 우 저의 상단 에서 얼마나 떨 어 지 는 지 설정 하려 면 이렇게 써 야 합 니 다.


.fixed{ 
  /*IE6  position: fixed;*/ 
  _position: absolute;         
  _top: expression(eval(document.documentElement.scrollTop)); 
  _margin-top:100px; 
}

여기top 의 코드 가 이렇게 짧 은 이 유 는 document.document Element.client Height 로 브 라 우 저 디 스 플레이 창 크기 를 가 져 올 필요 가 없 기 때 문 입 니 다.
그리고-this.offset Height-(parseInt(this.current Style.marginTop,10)|0)-(parseInt(this.current Style.marginBottom,10)|0)모든 것 은 미세 조정 을 위해 서 입 니 다.원 하지 않 으 면 추가 하지 않 아 도 됩 니 다.시각 적 효과 만 있 을 뿐 입 니 다.
또한,상기 코드 를 보 실 수 있 습 니 다.fixedbox 라 는 것 에 대해 저 는 right,left 를 설정 하지 않 았 습 니 다.왜냐하면 저 는 스크롤 바 를 따라 굴 러 갈 때 부모 급 div 의 float:left 속성 을 유지 하고 싶 기 때 문 입 니 다.
바로 오른쪽 에 있 는 파란색 블록 과 왼쪽 에 있 는 sss 는 80%와 20%의 분할 입 니 다.
궁금 한 점 이 있 으 시 면 메 시 지 를 남기 거나 본 사이트 의 커 뮤 니 티 에 가서 토론 을 교류 하 세 요.읽 어 주 셔 서 감사합니다. 도움 이 되 셨 으 면 좋 겠 습 니 다.본 사이트 에 대한 지지 에 감 사 드 립 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

IE6 와 IE7 에서 innerHTML 은 param 의 차 이 를 가 져 옵 니 다.

코드: IE6 에서 탐색: IE7 에서: IE7 은 object 의 param 라벨 을 모두 삭제 하 는 것 이 이해 가 되 지 않 습 니 다.innerHTML 을 통 해 object 와 그 중의 HTML 코드 를 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

IE6 의 position:fixed 문제 와 스크롤 바 에 따라 스크롤 하 는 효과

좋은 웹페이지 즐겨찾기