일부 컴퓨터에서 일부 브라우저에서 작동하지 않는 JQuery Offset ()

StackOverflow https://stackoverflow.com/questions/2426802

문제

특정 브라우저에서 요소를 배치하는 데 문제가 있습니다. 발견 된 jQuery AutoComplete를 사용하고 있습니다 여기. 자동 완성 값을 포함하는 DIV는 텍스트 상자 바로 아래에 있어야하며 완벽하게 정렬해야합니다. 코드는 $(textbox).offset();

내 문제를 해결하기 위해 코드를 포장하지 않은 후에는 다음과 같습니다.

var a = $(textbox).offset();
element.css({
    width: typeof e.width == "string" || e.width > 0 ? e.width : $(textbox).width(),
    top: a.top + textbox.offsetHeight,
    left: a.left
}).show();

이것은 작동 해야하는 것처럼 보이며 Firefox에서 작동합니다. IE8, Chrome에서는 작동하지 않습니다. 상단 위치는 항상 정확하지만 때로는 DIV가 왼쪽으로 너무 멀거나 오른쪽으로 너무 멀리 떨어져 있습니다.

다른 컴퓨터 (Windows XP와 함께)에서 IE8에서 작동합니다 ... 어떻게 될 수 있습니까? 또한 Mac, OS 10.5에서 테스트했습니다. Firefox에서는 작동하지만 Safari는 아닙니다.

플러그인을 비활성화하고, 화면 해상도 변경, 그리고 크기의 창문을 비활성화했습니다 ... 때로는 어떤 곳에서는 일관되지 않게 작동합니다.

누구든지 내가 놓친 것을 생각할 수 있습니까?

업데이트: jQuery 1.4.2와 함께 제공되는 자동 완성을 사용하기 위해 코드를 재 작업했습니다. jQuery UI 1.8RC3. 여전히 끊어졌습니다. 같은 문제. 도와주세요!

업데이트 2: 보다 이 관련 질문. jQuery UI 자동 완성이 오프셋을 사용하므로 중단됩니다. 누구든지 작업이 있습니까?

다음은 UI Autocomplete 함수의 JavaScript입니다.

.css({ top: (offset.top + this.element.height) + 'px', left: offset.left + 'px' })

변경된 경우 top: '0px', left: '0px' 잘 작동하지만 분명히 잘못된 지점에 위치합니다.

도움이 되었습니까?

해결책

나는 마침내 무슨 일이 일어나고 있는지 알아 냈습니다. 신체의 너비를 정의하는 CSS 규칙이있었습니다.

body {
    width: 900px;
}

일단 내가 이것을 바꾸면 width: 100%; 그리고 너비 900px의 div로 전체 페이지를 동봉했으며 예상대로 작동했습니다.

즉, 신체 요소를 사용하여 상단 및 왼쪽 값을 측정하는 것처럼 보입니다. offset(), 그러나 항목을 절대적으로 배치 할 때 상단과 왼쪽 거리를 측정 할 때 창 가장자리를 사용합니다.

이 답변이 내가 낭비한 시간이 항상 다른 사람을 구하기를 바랍니다.

다른 팁

나는 비슷한 질문을 만났고 마침내 발견했다 float 속성에 영향을 미칩니다 relative, 만들기 relative Internet Explorer 8에서는 DIV가 안정적이지 않지만 Firefox에서 잘 수행합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top