Table + position: absolute + height = ...

[SelenIT]

Тестовый пример безобразия: http://jsfiddle.net/SYhDr/1/

Задача элементарная: нужно отпозиционировать табличку к правому краю и растянуть на определенный процент контейнера заранее неизвестной ширины и высоты. Казалось бы, проблем нет: при абс. позиционировании 100% высоты всегда известны (это фактическая высота containing block'а — предка с position: relative), подставляй числа и радуйся. С обычным дивом так и выходит. Но с табличкой ожидаемый результат получается только в Опере и... IE8. Хром 19, Сафари 5.1.5 и Огнехвост 12 в один голос отказываются растягивать табличку на заданную высоту, а в IE9 и вовсе происходит леденящий душу маразм. Причем пунктом 17.5.3 спеки (как пытаются мозилловцы в этом баге, явно родственном), тут не отбиться: высота таблицы-то — вот она, 20%! Кстати, из комментов к тому же багу явствует, что как минимум в 7-й версии Огнехвост вёл себя так же, как Опера (к сожалению, прямо сейчас проверить не могу).

Неужели такой баг во всех новых браузерах, кроме Оперы? Или я не понимаю чего-то сильно неочевидного, но очень важного, в спеке?

Заранее спасибо за любые подсказки и наводки!

P.S. Поведению IE9 придает особую пикантность влияние top: c ненулевым значением всё немножко иначе (хотя гориз. позиционирование, увы, менее бредовым не стало)...

[psywalker]

Кстати, Opera в этом плане действительно молодец, мало того она способна даже на такое Было бы здорово, если бы и другие были способны на такие же фичибаги.

А по сабжу, к сожалению, придумался только лишь такой костыль

[psywalker]

P.S. Поведению IE9 придает особую пикантность влияние top: c ненулевым значением всё немножко иначе (хотя гориз. позиционирование, увы, менее бредовым не стало)...

Порадовало)

[SelenIT]

Мда, в IE10 бага осталась

[Viper]

А по сабжу, к сожалению, придумался только лишь такой костыль

Если мы заведомо знаем(судя из задания) ширину и высоту контейнера и установим их, то можно обойтись и без дива в качестве контейнера для позиционирования таблицы:

_http://jsfiddle.net/SYhDr/10/

IE 9 как-то странно позиционирует, в этом случае, таблицу, если ставить ее относительно right/bottom(если left/top, то нормально) и если у нее процентная ширина/высота. То есть, если позиционировать относительно left/top или задавать фиксированные размеры ширины/высоты, то, вроде, работает нормально. Закономерность этого бага заметна при изменениях количества контента внутри ячейки: таблица, насколько я понял, пытается позиционироваться относительно длины контента, а не ширины самой таблицы...

П.С. В IE10 не смотрел - нету. Что бы в полной мере иметь возможность управлять сложной таблицей, всегда приходиться задавать размеры для ее контейнера...(

[SelenIT]

насколько я понял, пытается позиционироваться относительно длины контента, а не ширины самой таблицы...

Больше всего на то похоже. Вероятно, где-то «дооптимизировались». Аналогичная беда есть и с высотой ячеек (см. «ложка дегтя» здесь).

[SelenIT]

В превью IE11 обе баги тоже остались, увы. Но для высоты позиционированной таблички нашлось лекарство — display: block. А совсем забавно, что в первоначальном коде top: 0 и top: 0% работают по-разному...

[Zverushka]

У таблиц вообще много глюков с отображением в разных браузерах. например если ячейка рилейтив, а слой внутри абсолют - его нельзя спозиционировать в фаерфоксе (наверное именно эта проблема и описана в первом посте). Кстати разрабы знают об этом и считают, что так и надо, не собираясь ничего исправлять.

Edited July 26, 2013 by Zverushka

[SelenIT]

Насчет Fx - они всё-таки считают это багом и понемногу фиксят. Теперь хотя бы относительно table можно позиционировать, раньше и этого не было... с 31-й версии уже пофиксили.

Edited September 22, 2014 by SelenIT