jQuery .width () и .height () странное поведение

Question

Почему в следующем коде .height () возвращает 95, а не 100, а .width () возвращает 200, как и ожидалось? Я работаю с Firefox 3.6.3.

HTML:

<table><tr>
   <td id="my"></td>
</tr></table>
<div id="log"></div>

CSS:

#my {
   border: 5px solid red;
}

JS:

$("#my").width(200).height(100);
$("#log").append("Width = " + $("#my").width() + "<br />");
$("#log").append("Height = " + $("#my").height());

Я пробовал .outerWidth () и .outerHeight (), а также .innerWidth () и .innerHeight (), но ни один из них не возвращает ожидаемый результат: пример кода

Но, если я установлю position: absolute, то выглядит намного лучше !

Кто-нибудь может объяснить это поведение?

Answer 1

Существует несколько методов jQuery для расчета высоты и ширины. Попробуйте использовать outerHeight()

Выдержка из документации JQuery: http://api.jquery.com/outerHeight/

.outerHeight( [ includeMargin ] )

includeMargin - логическое указание стоит ли включать элемент наценка в расчете.

http://api.jquery.com/innerHeight/

.innerHeight()

Этот метод возвращает высоту элемент, включая верх и низ отступы, в пикселях.

Редактировать: Настройка высоты () для элемента td корректируется с учетом заполнения по умолчанию (1px). Вычисленные размеры на самом деле ...

альтернативный текст http://files.wordofjohn.com/with_border.png

Вам следует установить отступ по умолчанию на 0px, чтобы избежать этих проблем.

table td {
    padding: 0;
}

Редактировать 2: Похоже, что это проблема браузера (возможно, что-то связанное с методом движка рендеринга для вычисления размеров таблицы). Эффекты этого поведения будут варьироваться в зависимости от браузера. Вы должны найти альтернативное решение без таблиц, используя div.

Answer 2

Я не могу объяснить это поведение лучше, чем Джон, но так как это несоответствие браузера все еще присутствует (по крайней мере, для тех, кто не может обновить версию jQuery), я подумал, что поделюсь обходным решением этой проблемы.

Использование свойств HTML DOM clientHeight и clientWidth представляется согласованным для большинства браузеров.

$("#my").width(200).height(100);
$("#log").append("Width = " + $("#my").attr("clientWidth") + "<br />");
$("#log").append("Height = " + $("#my").attr("clientHeight"));

Также вероятно, что вы можете использовать вместо этого offsetHeight / offsetWidth, в зависимости от того, что вам нужно.

Answer 3

Я не уверен в этом .. Я также нахожу это довольно странным .. Это мое предположение.

Граница сгорает до фактической высоты и игнорируется jquery при расчете высоты