ie에서div의 절대 경계가 틀렸습니다.
function getOffset(obj) { var x = obj.offsetLeft || 0; var y = obj.offsetTop || 0; var temp = obj; while(temp.offsetParent) { temp = temp.offsetParent; x += temp.offsetLeft; y += temp.offsetTop; } return {left: x, top: y};} 사실 가장 주요한 원인은 페이지가 이 아래의 CSS를 추가하지 않았기 때문에 브라우저에 해석 차이가 생겼을 수 있습니다.
CSS code
*
{
padding
:
0
;
margin
:
0
;
}
IE는 기본적으로 IE 박스 모델을 사용하지만 Firefox는 W3C 박스 모델을 사용합니다.
HTML 더하기:
이 한 마디로 IE가 W3C 상자를 사용할 수 있게 할 수 있다.
모두 좋다
td의 요소는 첫 번째 절대/상대적 포지셔닝의hierarchy parent를offsetParent로 간주합니다. 찾지 못하면 세 가지 상황으로 나누어 토론합니다.
하나, 만약 이 요소가 절대/상대적인 포지셔닝이 없다면 td를offsetParent로 간주합니다
둘째, 만약에 이 원소가 절대/상대적 위치를 정하고 테이블이 절대/상대적 위치를 정하지 않는다면 바디를 오프셋 Parent로 간주할 것이다
셋째, 이 요소가 절대/상대적 위치를 정하고 테이블이 절대/상대적 위치를 정하면 테이블을offsetParent로 간주합니다
예시 코드를 보겠습니다.
1.<BODY >
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv">sondiv</div></div></TD>
</TR>
</TABLE>
</BODY>
실행 결과:parentdiv.offsetParent.tagName IS "body"
sondiv.offsetParent.id IS "parentdiv"
2.<BODY >
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD>
</TR>
</TABLE>
</BODY>
실행 결과:parentdiv.offsetParent.tagName IS "body"
sondiv.offsetParent.id IS "parentdiv"
3.<BODY>
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD>
</TR>
</TABLE>
</BODY>
실행 결과:parentdiv.offsetParent.tagName IS "TD"
sondiv.offsetParent.tagName IS "body"
4.<BODY >
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" >parentdiv<div id="sondiv">sondiv</div></div></TD>
</TR>
</TABLE>
</BODY>
실행 결과:parentdiv.offsetParent.tagName IS "TD"
sondiv.offsetParent.tagName IS "TD"
5.<BODY>
<TABLE BORDER=1 ALIGN=right style="position:relative">
<TR>
<TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD>
</TR>
</TABLE>
</BODY>
실행 결과:parentdiv.offsetParent.tagName IS "Table"
sondiv.offsetParent.tagName IS "parentdiv"
js.offsetParent 속성
수장하다
참조:
offsetParent 속성은 대상의 인용을 되돌려줍니다. 이 대상은 offsetParent를 호출하는 요소와 가장 가까운 (포함 차원에서 가장 가까운) 이며, CSS가 포지셔닝한 용기 요소입니다.만약 이 용기 요소가 CSS 포지셔닝을 하지 않았다면 offsetParent 속성의 수치는 루트 요소(표준 호환 모드에서는 html 요소, 괴이한 표현 모드에서는 바디 요소)의 인용이다.용기 원소의 스타일.display가 "none"으로 설정되었을 때 (IE 및 Opera 제외) offsetParent 속성은null로 되돌아옵니다.
구문:
parentObj = element.offsetParent
변수:
·parentObj는 원소의 인용으로 현재 원소의 편이량이 그 중에서 계산된다.
js.offsetParent 등록 정보 모음 참조:
offsetParent 속성은 대상의 인용을 되돌려줍니다. 이 대상은 offsetParent를 호출하는 요소와 가장 가까운 (포함 차원에서 가장 가까운) 이며, CSS가 포지셔닝한 용기 요소입니다.만약 이 용기 요소가 CSS 포지셔닝을 하지 않았다면 offsetParent 속성의 수치는 루트 요소(표준 호환 모드에서는 html 요소, 괴이한 표현 모드에서는 바디 요소)의 인용이다.용기 원소의 스타일.display가 "none"으로 설정되었을 때 (IE 및 Opera 제외) offsetParent 속성은null로 되돌아옵니다.
구문:
parentObj = element.offsetParent
변수:
·parentObj는 원소의 인용으로 현재 원소의 편이량이 그 중에서 계산된다.
테스트 코드 1:
<!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> <script type="text/javascript" language="JavaScript"> function offset_init(){ var pElement = document.getElementById("sonObj"); parentObj = pElement.offsetParent; alert(parentObj.tagName); } </script> </head> <body onload= "offset init()" <div id= "parent"> <p id= "sonObj"> OffsetParent 속성 테스트 </p> </div> </body> </html> 테스트 결과:Firefox3: "BODY" Internet Explorer 7: "BODY" Opera 9.51: "BODY" Chrome 0.2: "BODY" Sari: "BODY""BODY 결론: 원소와 부모 원소가 CSS로 위치를 정하지 않았을 때 이 원소의offsetParent 속성의 수치는 루트 원소이다. 더 정확히 말하면 이 원소의 각종 편이량 계산(offsetTop, offsetLeft 등)의 참조물은 Body 원소이다. (사실 표준 호환 모드든 괴이한 모드든 루트 원소는 Body 원소이다) 테스트 코드 3:<! 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"> #Grandfather{ position:relative; left:25px; top:188px; border:1px solid black; } </style> <script type="text/javascript" language="JavaScript"> function offset_init(){ var pElement = document.getElementById("sonObj"); parentObj = pElement.offsetParent; alert(parentObj.tagName); } </script> </head> <body onload='offset init()'<h1 id='Grandfather'> <div id='parent'> <p id='sonObj'> OffsetParent 속성 테스트</p> </div> </h1> 바디> </html> 테스트 결과: Firefox3:'H1'InternetExplorer 7:'sonObj'> 7:'son Opera 9.51'Opera 9.51:'H1'Opera 9.51:'H1'H1:'H1'Chrome'Hrome'요소인'Hrome:'Hrome Hrome Hrome'요소인 Hrome:'HromeCSS를 찾을 때(absolute 또는 relative)그러면 이 요소의 offsetParent 속성의 수치는 DOM 구조 차원에서 가장 가깝고 CSS가 지정한 요소입니다.테스트 코드 4:<!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"> #sonObj{ position:relative; left:25px; top:188px; border:1px solid black; } </style> <script type="text/javascript" language="JavaScript"> function offset_init(){ var pElement = document.getElementById("sonObj"); parentObj = pElement.offsetParent; alert(parentObj.tagName); } </script> </head> <body onload='offset init()'<h1 id='Grandfather'> <div id='parent'> <p id='son Obj'> Offset Parent 속성 테스트</p> </div> </h1> 바디> </html> 테스트 결과: Firefody x 3:'BODY'InternetExplorer 7:'son Obbbbj'> Opera 1:'BODY'Opera 1:'BODY DRODY DRome:'BODY DRome DY 0.2:'BODY D: BODY D: Y D: 요소는 CSS로 배치됩니다.부모 요소와 DOM 구조 차원에서 CSS 포지셔닝을 하지 않았을 때 이 요소의 offsetParent 속성의 수치는 HTMLBODYelement이다.더 정확히 말하면 이 원소의 각종 편이량 계산(offsetTop,offsetLeft 등)의 참조물은 바디 원소이다.테스트 코드 2:<!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"> #parent{ position:absolute; <!--position：relative;--> left:25px; top:188px; border:1px solid black; } </style> <script type="text/javascript" language="JavaScript"> function offset_init(){ var pElement = document.getElementById("sonObj"); parentObj = pElement.offsetParent; alert(parentObj.tagName); } </script> </head> <body onload='offset init(()'<div id='parent'>div 테스트 코드<p id='sonObj'> Offset init(offset init()'<div()'</div idy> </html> </html> 테스트 결과: Firefox3:'DIV'InteredeV InternetExplorer 7:'DIV'Opera 9.5:'DIV'Oppera 9.51:'DIV'Chrome 0.2:'DIV'Chrome 0.2:'DIV'0.2:'DIV'SV SarriV Sari 3:'DI3:'DIV DI3:'DI3:'DI)그러면 이 요소의 offsetParent 속성 값이 부모 요소로 지정됩니다.더 정확히 말하면 이 원소의 각종 편이량 계산(offsetTop,offsetLeft 등)의 참조물은 그 부원소이다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode
그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다.
제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다.
contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다. 제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다. contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
