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 에서 다음 과 같은 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 는 위 와 같은 스타일 이 있어 야 합 니 다.다른 브 라 우 저 처럼 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;
}
그리고-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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
