Internet Explorer 상자 모델 - 오프셋은 무엇입니까?

IE 7을 지원하기 위해 사이트를 변경하려고합니다. 그러나 69px만큼 오른쪽으로 오프셋되는 몇 가지 요소가 있습니다. IE9에서 테스트 중이며 IE7 인 것처럼 페이지를 렌더링합니다. 개발자 모드를 켜고 요소를 검사 할 때 "여백"을 둘러 쌈은 "오프셋"이라는 매개 변수가 있다는 것을 알았습니다.Internet Explorer 상자 모델 - 오프셋은 무엇입니까?

나는 이것에 대해 들어 본 적이 없으며 인터넷 검색이 나를 도와주지 못했다. 나는 플로트 오프셋에 대해 뭔가를 발견 할 수 있었지만, 이는 동일하지는 않았지만 문제의 일부를 제거했다고 생각했다. quirks 모드? 이 오프셋 매개 변수를 어떻게 제거 할 수 있습니까? 분명히

나는 IE-7 특정 스타일 시트가 설정 한 당신은이 링크를 내 테스트 환경으로 이동하여 문제를 직접 테스트 할 수 있습니다

해결책을 찾았 해결

http://suitable.amok-adhoc.com/2012/

- 아주 간단했습니다. 그냥 (이이 일에 우선 IE는 마진을 추가하고 "오프셋"라는 다른 모든 브라우저에서 부모 요소에서 상속되었지만) 명시 적으로이 같은 입장을 선언했다 :

p { 
    left:0px; 
}

출처

2012-02-13 funkylaundry

이 SO 대답을 참조하십시오 : http://stackoverflow.com/questions/4817745/how-do-i-get-rid-of-an-elements-offset-using-css – Kibria

찾을 수 없음 요청 된 URL/2012 /이 서버에서 찾을 수 없습니다. 또한 ErrorDocument를 사용하여 요청을 처리하는 동안 404 찾을 수 없음 오류가 발생했습니다. –

미안 해요, 그게 내 개발 환경이었습니다. 1 년 후에도 계속 실행되지는 않을 것입니다.) 그러나 Kibria 스레드는 정말 좋은 설명을 제공하기 위해 연결됩니다. – funkylaundry

오프셋은 요소가 원래 위치에서 이동 한 거리입니다. 이것은 위치 일 때 상대 또는 절대 중 하나의 요소 인 left, top, bottom 및/또는 right 값으로 표시됩니다. 예를 들어 다음과 같은 코드를 가지고 :

#header { 
    top: 3em; 
    left: 3em; 
    position: relative; 
}

을 우리가 인터넷 익스플로러 10에서이 요소를 검사하는 경우, 우리는 당신이 언급 한 오프셋을 참조하십시오. em 값은 픽셀로 변환되었지만 효과는 여전히 표시됩니다. 우리는 (또한 오페라) 크롬 개발자 도구에서 비슷한 것을 볼 수 있음을, 만 대신 "위치"로 표시 주 : 이상하게 enter image description here

는, 파이어 폭스도 오프셋 통신에 나타나지 않습니다/자신의 그림을 통해 위치 : 결국

enter image description here

이 단순한 의미의 문제입니다. 우리가 그것을 "상쇄 (offset)"또는 "위치 (position)"라고 부르든지간에 그것은 여전히 같은 것입니다. 원래 위치에서 화면까지의 거리입니다.

희망이 도움이됩니다.

출처

2013-04-12 15:13:14 Sampson

CSS2.1도 비공식적으로 오프셋을 호출합니다. http://www.w3.org/TR/CSS21/visuren.html#position-props – BoltClock

Nice find, @BoltClock. 나는 offset *의 사용에 충격받지 않는다; 이는 레이아웃과 관련된 DOM 속성 중에서도 매우 일반적인 용어입니다. 나는 파이어 폭스가 굉장한 것처럼 그것들을 언급하지 않는다는 것에 대부분 충격을 받았다. – Sampson

i는 요소의 위치를 설정하지 않았으며 자기와 부모에 여백도없고 계산 된 탭에서 모든 스타일을 전환했지만 여전히 여기에서 오프셋되었고 요소는 10px 으로 이동되었습니다 (크롬에서는 이동하지 않고 왼쪽으로 위치를 설정 함). : 크롬에서도 -10px 쉬프트 요소) – devi

이것은 이상하게 보일 수 있지만 을 입력에 대해 CSS에 설정할 수 있습니다. IE8에서 수정되었습니다.

출처

2014-06-30 09:31:11 BrainCoder

비슷한 문제가 있습니다. 일부 디버깅을 한 후폴리 필 (Poly-fill)을 사용하여 문제가 발생했습니다. 헤더 메뉴의 너비가 올바르게 나타나지 않았습니다. (축소 된 너비로 나타남). 나는 meta(http-equiv="x-ua-compatible" content="IE=Edge,chrome=1")도 사용하고 있었다.

rem-polyfil JS 파일을 제거한 후 올바르게 작동하기 시작했습니다.

출처

2017-07-25 10:58:52

사용하려고 할 수 있습니다. position: -ms-device-fixed; 이 트릭이 나를 도와줍니다.

출처

2017-11-16 14:16:52

Internet Explorer 상자 모델 - 오프셋은 무엇입니까?

답변

관련 문제