Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.08.2013, 17:01
Профессор
Отправить личное сообщение для lancer Посмотреть профиль Найти все сообщения от lancer
 
Регистрация: 30.01.2008
Сообщений: 230

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>

Последний раз редактировалось lancer, 19.08.2013 в 18:33.
Ответить с цитированием
  #2 (permalink)  
Старый 19.08.2013, 14:33
Профессор
Отправить личное сообщение для lancer Посмотреть профиль Найти все сообщения от lancer
 
Регистрация: 30.01.2008
Сообщений: 230

Эти паддинги не отображаются в верстке в FF и Opere, поэтому и не входят в offsetHeight. Нельзя применять паддинги к td, пользуйтесь маргинами внутренних элементов.
Ответить с цитированием
  #3 (permalink)  
Старый 19.08.2013, 14:48
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

lancer, как вариант, можно взять содержимое ячейки в div и получать offsetHeight этого div'а (без паддингов), а если нужны так эти паддинги, то можно просто:
...offsetHeight + parseFloat(parentNode.style.padding);
Ответить с цитированием
  #4 (permalink)  
Старый 19.08.2013, 16:24
Профессор
Отправить личное сообщение для lancer Посмотреть профиль Найти все сообщения от lancer
 
Регистрация: 30.01.2008
Сообщений: 230

Правильней
parentNode.computedStyle.padding

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

Последний раз редактировалось lancer, 19.08.2013 в 16:27.
Ответить с цитированием
  #5 (permalink)  
Старый 19.08.2013, 16:28
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от lancer
Нельзя применять паддинги к td
Вот это новость . Сколько версткой занимаюсь, сколько таблиц переверстал, но ты только сейчас открыл мне глаза
Ответить с цитированием
  #6 (permalink)  
Старый 19.08.2013, 18:30
Профессор
Отправить личное сообщение для lancer Посмотреть профиль Найти все сообщения от lancer
 
Регистрация: 30.01.2008
Сообщений: 230

danik, пример в первом посте сначала заюзай, потом глумись.
Можешь заодно задуматься почему бордер тоже не входит в offsetHeight.
Ответить с цитированием
  #7 (permalink)  
Старый 19.08.2013, 19:02
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Дело в том что в обычных ситуациях высоту для td прописывать нет необходимости. Я смеюсь над твоим выводом: почему ты не сделал вывод что "нельзя применять высоту к td"? Ведь это в той же степени "логично", не?
В последнем Firefox выдает 1040. Везде выдает 1040 кроме Оперы.
И хотя Опера в dragonfly показывает что td имеет content-box - это не так. Опера применяет border-box.
Вот тут расписано: http://www.brunildo.org/test/TablesBM_s.html
Ответить с цитированием
  #8 (permalink)  
Старый 19.08.2013, 22:25
Профессор
Отправить личное сообщение для lancer Посмотреть профиль Найти все сообщения от lancer
 
Регистрация: 30.01.2008
Сообщений: 230

Занятно.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему padding вокруг текста в разных браузерах Artem Narushevich (X)HTML/CSS 3 02.08.2013 16:51
Не работают фреймворки в некоторых браузерах Mateus Общие вопросы Javascript 18 25.01.2013 13:00
ie7 border padding x-yuri Оффтопик 3 12.10.2009 14:58