집 >웹 프론트엔드 >HTML 튜토리얼 >위치에 대한 자세한 설명: IE6의 문제 해결

위치에 대한 자세한 설명: IE6의 문제 해결

亚连원래의: 2018-05-21 15:21:202132검색

이 글은 IE6의 문제 해결과 스크롤바의 효과에 대한 자세한 설명을 중심으로 소개하고 있습니다. 도움이 필요한 친구들에게 도움이 되었으면 좋겠습니다.

상세 설명 위치: IE6에서 수정 스크롤 막대를 사용한 스크롤 문제 및 효과

머리말:

"[jQuery] IE6 호환 스크롤 모니터링"(링크를 열려면 클릭)에서 IE6를 해결하기 위해 언급됩니다. 특히 js 파일을 도입하기 위해 문제를 해결하고 이 p에 대한 고정 위치 지정을 선언하는 스크립트를 선언하여 이를 해결합니다. 처음에는 좋지 않습니다. 가져온 Javascript를 관리하는 어려움 외에도 head 문에 JavaScript를 도입한 다음 p에 대한 ID를 선언하고 스크립트에 문을 작성해야 하는 것도 정말 짜증납니다.

위치 고정 사용은 다음과 같은 효과를 얻으려고 노력하는 것 이상입니다.

기본적으로 position:fixed는 IE7 이상의 모든 브라우저에서 문제가 되지 않습니다:

IE8:

FireFox:

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

은 position:absolute;를 사용하고 CSS 스타일로 실행되는 자바스크립트 스크립트를 추가해야만 해결할 수 있습니다.

<!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> 
    <p 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>    
    </p> 
    <p style="float:left;width:20%;min-height:100px;"><p class="fixedbox"></p></p> 
    <p style="clear:both"></p>     
  </body> 
</html>

위 코드는 IE6 스타일에 대해 앞에 _가 오고, _ 부분은 IE6 전용으로 다시 작성된 스타일 문입니다. 자세한 내용은 "[CSS] 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는 일부 브라우저에서는 제대로 작동하지 않을 수 있습니다. browsers 이므로 각 스타일 앞에 밑줄 _ 을 추가하여 IE6에서만 실행된다는 것을 나타냅니다.

동시에 IE6은 위의 스타일을 갖춰야 하며 다른 브라우저처럼 위치에 오른쪽, 위쪽, 왼쪽, 아래쪽을 사용하지 않고 margin-bottom, margin-left, margin-right를 사용하여 위치를 설정합니다. p 위치에 따라 고정됨: ,

여기서 p 위치를 조정할 때도 주의해야 합니다. 위에서 언급한 IE6 호환 CSS는 top 속성을 사용하므로 이를 설정하면 margin-top이 작동하지 않습니다. p가 브라우저에서 떨어져 떠 있도록 하려면 다음과 같이 작성해야 합니다:

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

여기서 _top에 대한 코드가 훨씬 짧은 이유는 _top을 가져오기 위해 document.documentElement.clientHeight를 사용할 필요가 없기 때문입니다. 브라우저 표시 창 크기.

And -this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0) 은 다음과 같은 경우 더 정확하게 미세 조정하는 것입니다. 원하지 않습니다. 추가할 필요는 없습니다. 단지 약간의 시각적 효과만 있을 뿐입니다.

또한 위 코드에서 볼 수 있듯이 고정 상자에 대해서는 float:left 속성으로 스크롤할 때 상위 p를 계속 유지하기를 원하기 때문에 오른쪽과 왼쪽을 설정하지 않았습니다.

즉, 오른쪽의 파란색 블록과 왼쪽의 많은 sss가 여전히 80%와 20%로 나누어져 있다는 것입니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

위치에 대한 자세한 설명: IE6의 문제 해결

관련 기사