Javascript-форум - td offsetHeight, в некоторых браузерах не учитывается padding и border

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - td offsetHeight, в некоторых браузерах не учитывается padding и border (https://javascript.ru/forum/misc/40729-td-offsetheight-v-nekotorykh-brauzerakh-ne-uchityvaetsya-padding-i-border.html)

td offsetHeight, в некоторых браузерах не учитывается padding и border

Беру offsetHeight ячейки.
FF и Опера выдают по 1000px, а все остальные правильно 1040 (ие, сафари, хром).
В верстке паддинги в этих браузерах не отображаются. Бордеры присутствуют.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ex1</title>
<meta name="description" content="" />
<meta name="keywords" content="" />

<style>
*{margin:0; padding:0}

#contenter{}
#contenter td{vertical-align: top; border-top: 10px solid #000; border-bottom: 10px solid #000; padding: 10px 0 10px 0;}

#leftblock{width: 250px; background: #0074cd; }
#midblock{height: 1000px; background:#4b89b8;}
#rightblock{width:250px; background: #0074cd;}
</style>


<body>

<table id="contenter" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr> 
      <td id="leftblock"></td>
      <td id="midblock"></td>
      <td id="rightblock"></td>     
</tr>
<table>

<script>
var left_block = document.getElementById("leftblock");
var left_block_height = left_block.offsetHeight;
alert(left_block_height);
</script>
</body>
</html>

Эти паддинги не отображаются в верстке в FF и Opere, поэтому и не входят в offsetHeight. Нельзя применять паддинги к td, пользуйтесь маргинами внутренних элементов.

lancer, как вариант, можно взять содержимое ячейки в div и получать offsetHeight этого div'а (без паддингов), а если нужны так эти паддинги, то можно просто:

...offsetHeight + parseFloat(parentNode.style.padding);

Правильней

parentNode.computedStyle.padding

В computedStyle будут объединенные стили style и css. Если в style описано какое-то свойство, оно главнее, перекрывает то же свойство в css.

Цитата:

Сообщение от lancer

Нельзя применять паддинги к td

Вот это новость :D . Сколько версткой занимаюсь, сколько таблиц переверстал, но ты только сейчас открыл мне глаза :)

danik, пример в первом посте сначала заюзай, потом глумись.
Можешь заодно задуматься почему бордер тоже не входит в offsetHeight.

Дело в том что в обычных ситуациях высоту для td прописывать нет необходимости. Я смеюсь над твоим выводом: почему ты не сделал вывод что "нельзя применять высоту к td"? Ведь это в той же степени "логично", не?
В последнем Firefox выдает 1040. Везде выдает 1040 кроме Оперы.
И хотя Опера в dragonfly показывает что td имеет content-box - это не так. Опера применяет border-box.
Вот тут расписано: http://www.brunildo.org/test/TablesBM_s.html