jQuery .width () и .height () странное поведение
Почему в следующем коде .height () возвращается 95, а не 100, в то время как .width () возвращается 200 как ожидалось? Я работаю с Firefox 3.6.3.
HTML:
CSS:
#my {
border: 5px solid red;
}
JS:
$("#my").width(200).height(100);
$("#log").append("Width = " + $("#my").width() + "
");
$("#log").append("Height = " + $("#my").height());
Я попробовал .outerWidth () и .outerHeight () и также .innerWidth () и .innerHeight (), но ни один из них не возвращает ожидаемый результат: пример кода
Но, если я установил position: absolute это выглядит намного лучше!
Кто-либо может объяснить это поведение?
2 ответа
Есть несколько методов jQuery для вычисления высоты и ширины. Попробуйте использовать outerHeight()
Выдержка из jQuery Docs: http://api.jquery.com/outerHeight/
.outerHeight( [ includeMargin ])includeMargin - булево значение, указывающее. включать ли поля элемента в расчет.
http://api.jquery.com/innerHeight/
.innerHeight()Этот метод возвращает высоту элемента, включая верхнюю и нижнюю части. элемента, включая верхнюю и нижнюю в пикселях.
Edit: Установка height() для td-элемента настроена на включение padding по умолчанию (1px). Вычисленные размеры на самом деле...
(источник: wordofjohn.com)
Вы должны установить padding по умолчанию равным 0px, чтобы избежать этих проблем.
table td {
padding: 0;
}
Edit 2: Похоже, что это проблема браузера (возможно, что-то связанное с методом расчета размеров таблицы, используемым движком рендеринга). Эффект от такого поведения будет разным в разных браузерах. Вам следует найти альтернативное решение без таблиц, используя divs.
Я не уверен в этом .. Я тоже нахожу это довольно странным .. Это мое предположение.
Граница «съедает» фактическую высоту и игнорируется jquery при вычислении высоты