2010-04-11 4 views
1

Мы все знаем, что IE6 сложно. Но, похоже, различие в позиционировании в более поздних версиях IE, по сравнению с Firefox или другими браузерами. У меня есть простая пара функций javascript, которая находит положение элемента, а затем отображает другой элемент по отношению к первому элементу. Идея состоит в том, чтобы второй элемент, который несколько больше, появился перед первым элементом, когда мышь нависает над ним. Он отлично работает, за исключением всех версий Internet Explorer, позиция второго элемента выглядит иначе, чем в Firefox.Получение позиции элемента в IE по сравнению с другими браузерами

код, чтобы получить позицию элемента является:

function getPosition(e) 
{ 
    var left = 0; 
    var top = 0; 

    while (e.offsetParent) { 
     left += e.offsetLeft; 
     top += e.offsetTop; 
     e = e.offsetParent; 
    } 

    left += e.offsetLeft; 
    top += e.offsetTop; 
    return {x:left, y:top}; 
} 

И фактическое отображение кода опрокидывание:

var pos = getPosition(elem1); 
elem2.style.top = pos.y - 8; 
elem2.style.left = pos.x - 6; 

В Firefox elem2 появляется непосредственно над elem1, как я хочу к. Но в IE7 или IE8 он выглядит совсем не так. В чем причина этого, и есть ли способ его исправить?

+3

Я дам вам пользу от сомнений и предположим, что у вас есть веская причина для написания такого кода самостоятельно, но, безусловно, быстрый способ получить некоторые рекомендации - это прочитать соответствующий код в jQuery или другой такой поскольку это именно то поведение, которое они предназначены для нормализации. – Pointy

+0

Я второй, что говорит Уокей. При всем уважении к тому, чтобы катиться самостоятельно, фреймворки разработаны таким образом, чтобы упростить такие вещи. –

+1

Пожалуйста, не препятствуйте людям учиться. Кроме того, большие библиотеки не являются непогрешимыми. –

ответ

1
elem2.style.top = pos.y - 8; 

В CSS требуется блок. +'px'.

(Там, предположительно, может быть различие между IE и другими браузерами в зависимости от того, как именно elem2 позиционируются.)

1

Как Понтии прокомментировали самое лучшее, чтобы пойти и посмотреть на JQuery (или YUI, что, вероятно, более читаемый) код. Существует нормализация, требуемая главным образом IE quirksmode (но это не единственная проблема). Например (но я не уверен), я думаю, вам нужно добавить к размеру границ левой/верхней общей суммы каждого позиционированного абсолютного/относительного элемента, с которым вы сталкиваетесь в цикле while, но в IE6 вам нужно добавить границы только в том случае, если положение абсолютное, по крайней мере, в quirksmode.

Ваш код может работать без добавления больше нормализации, только если вы используете DOCTYPE (либо переходному или Strict) в качестве 1-й линии очень ваших HTML-страниц, и вы сбросить тело/HTML/приграничные поля и отступы. Другими словами, использовать эту линию в начале ваших страниц:

<!DOCTYPE... 

и в вашем CSS:

html, body {margin: 0; padding: 0; border-width: 0;} 

Они так или иначе не может быть достаточно.

Смежные вопросы