Кроссбраузерный метод для получения ширины и высоты DIV?

Question

Это мой первый пост, поэтому, пожалуйста, будьте осторожны со мной. Я уверен, что я делаю все неправильно. Однако я не смог найти ни одного сообщения, которое ответило бы на вопрос выше.

Я использую jQuery. Я пытаюсь найти способ получить текущую ширину и высоту элемента DIV, даже если они установлены на «авто». Я нашел много способов сделать это, но ни один метод не возвращает такую ​​же ширину в IE. Важно, чтобы этот метод был кросс-браузерным, поскольку он нарушит макет страницы, если в разных браузерах будут возвращаться разные номера.

.width () и .height () не работают, потому что в IE вычитается заполнение (например, width () возвращает 25, где width равно 30, а padding 5).

.outerWidth () и .outerHeight () также не согласованы. Хотя они работают с IE (хотите верьте, хотите нет) в FF, отступы снова добавляются к полной ширине (например, externalWidth () возвращает 110 в FF, где ширина равна 100px, а отступ - 10px).

Есть ли выход из этого беспорядка без написания сложных проверок браузера? Спасибо!

Answer 1

Мне кажется, что вам нужно добавить DOCTYPE на свою страницу, чтобы принудительно перевести IE в режим «соответствия стандартам», а не в режим «причуд». См. Причудливый режим и строгий режим .

Также см. width():

и outerWidth():

Answer 2

Я не знаю, помогает ли это, но следующий фрагмент установит высоту внутреннего элемента, чтобы он полностью заполнил доступное пространство Внутренний элемент (е) могут быть вложенными на любой глубине внутри опорного элемента (г), который имеет заданную высоту. Фрагмент учитывает высоту всех братьев и сестер между e и r. Оба параметра могут быть переданы как элементы DOM или объекты JQuery.

<code>
var fit_v = function ( e, r, no_set ){
    if (!e.jquery) e = $(e);
    if (!r.jquery) r = $(r);
    var h, s, b = 0, d = 0;
    for (var i = 0; i < r[0].childNodes.length; i++){
      s = $(r[0].childNodes[i])
      d += s.outerHeight();
      d += Math.max(b,parseInt(s.css('margin-top')));
      b = parseInt(s.css('margin-bottom')); 
    } 
    d += b;
    h = r.height() - d;
    if (!no_set) e.height(h); 
    return h;
  };<br>