Функция работает для одного div, но не для другого

Question

У меня есть два разных элемента div на двух разных веб-страницах, которые используют два разных файла JS. Оба JS-файла имеют одинаковую функцию alignDiv(), которая используется для выравнивания div в точном центре страницы. При загрузке окна я вызываю следующую функцию:

JS

function alignDiv(){
  var container= document.getElementById("container");
  var inner= document.getElementById("inner");
  var inHeight=inner.offsetHeight;
  var conHeight=container.offsetHeight;
  var conWidth=container.offsetWidth;
  var inWidth=inner.offsetWidth;

  inner.style.position="absolute";
  inner.style.top=((conHeight-inHeight)/2);
  inner.style.left=((conWidth-inWidth)/2);

}

Для одного div он назначает атрибуты position, top и left так, как это должно быть. Для другого div он только назначает атрибут позиции и не назначает верхний и левый. Я понятия не имею, почему он это делает! Спасибо за любую помощь.

Answer 1

Ваши две разные страницы предположительно имеют разные типы документов.Один из которых запускает режим стандартов, а другой - режим Quirks.

Свойства top и left принимают длины .Если они не равны 0, длины должны иметь единицы.Вы назначаете им номера.

В стандартном режиме браузеры правильно игнорируют правило.В режиме причуд они пытаются выполнить восстановление после ошибок, предположив px.

inner.style.top=((conHeight-inHeight)/2) + "px";
inner.style.left=((conWidth-inWidth)/2) + "px";

… и исправить страницу режима причуд, чтобы она использовала режим стандартов.Существует много несоответствий между браузерами в режиме Quirks, что делает его большим количеством проблем.

Answer 2

согласно вашему коду, Ваш HTML должен быть,

<div id="container" style="position:relative">
    <div id = "inner">
        some content
    </div>
</div>

Вы можете убедиться, что на обеих страницах div с именем container имеет стиль, подобный "position:relative", и попробовать еще раз?

и убедитесь, что вы присваиваете строку вместо int в свойстве top / left. Как

inner.style.top=((conHeight-inHeight)/2)+"px";

Answer 3

используйте firebug или whatelse для проверки

 var inHeight=inner.offsetHeight;
  var conHeight=container.offsetHeight;
  var conWidth=container.offsetWidth;
  var inWidth=inner.offsetWidth;

эти значения являются числами. если нет, то это не сработает