Как разобраться?

[Softlink]

Всем привет. Сегодня столкнулся с одной особенностью.

Если указать для родителя, у которого задан display:table вертикальные паддинги, то потомок( с display:table-cell) растягивается на ширину(!), бОльшую, чем 100% родителя. Соответственно, если убрать паддинги, то все становится хорошо.

Наблюдается только в Хроме. Причем самое интересное, что смотрели на другой машине, там в Хроме все нормально. Но у нас разница в версиях браузеров и ОС, у меня v.16.. и W7, а там v.15.. и XP.

Пример прилагаю http://alpatriott.ru/works/primer/width.html

Посмотрите пожалуйста, у кого как отображается. Либо у меня Хром сломался либо это баг какой-то?

[Great Rash]

У меня горизонтальный скролл (Win Vista, Chrome v16.0.912.63 m)

[SelenIT]

Похоже, баг. Недавно на форуме уже всплывала похожая проблема, только там источником лишней ширины почему-то был верхний бордер. С паддингом, видимо, аналогично. Надо репортить, пусть фиксят...

Upd. нашел свой пример, подтверждающий наличие проблемы с бордером: http://jsfiddle.net/6X42L/ (можно поменять толщину верхнего бордера и увидеть, как это тут же отражается на ширине, вопреки всякой логике, да и правый-левый бордеры действуют на ширину не так, как везде).

[Svatov]

Тестил у себя в win7 и XP (вторая ОС) - все нормально. (Chrome 16.0.912.63 m)

Апдейт...странно, а в виртуалке там ХП первый див больше ширины экрана)..версия Хрома та же..ай..там падинги увеличивают, а падинги вертикальные..действительно не порядок А на первый взгляд не заметно) Вертикальные ширину добавляют)

Edited December 22, 2011 by Svatov

[SelenIT]

У меня ширина верхнего блока на 20px больше, чем нижнего (16.0.912.63 m, Win 7 Pro 32b).

[Softlink]

Один из участников форума предположил, что паддинги для таблиц не свойственны, потому и может возникать такой баг. Но с другой стороны:

1) почему вертикальные паддинги влияют?;

2) в других браузерах все в порядке;

3) собственно, в самом хроме (15) под XP все нормально;

[Great Rash]

Возможно спасет заигрывание с box-sizing...

[SelenIT]

Хм, до сего дня я был уверен, что паддинги для таблицы должны игнорироваться, но в спеке про них написано "Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column", сама таблица в списке отсутствует, значит, к ней должны применяться. Но вертикальные паддинги бордеры и ширина уж точно пересекаться не должны...

[Softlink]

Возможно спасет заигрывание с box-sizing...

Да решил вопрос старым способом, задал паддинги потомкам. С ними все хорошо отрабатывает. Можно попробовать с border-spacing еще поиграться(есть предположение, что будет работать исправно), но пока времени нет. Потом как-нибудь попробую.

[s0rr0w]

Chromium v15 все хорошо показывает

Но без горизонтального скролла

[s0rr0w]

Похоже, баг.

100% баг. Вернее фича. Для обратной совместимости с ИЕ

[SelenIT]

В чем совместимость-то? У IE при нормальном доктайпе уже 10 лет боксовая модель адекватна (если вынести за скобки странности хзлейаута). А такой дикости, как влияние на ширину вертикальных паддингов/бордеров, сколько себя помню (где-то с IE4.01), даже в нем не водилось...

[s0rr0w]

В чем совместимость-то? У IE при нормальном доктайпе уже 10 лет боксовая модель адекватна (если вынести за скобки странности хзлейаута). А такой дикости, как влияние на ширину вертикальных паддингов/бордеров, сколько себя помню (где-то с IE4.01), даже в нем не водилось...

С таблицами не очень адекватная.

А вертикальные как раз могут влиять из-за 100% высоты body

Можно попробовать отключить (я проверить не могу, у меня все более-менее нормально отображается)

[Softlink]

А вертикальные как раз могут влиять из-за 100% высоты body

Можно попробовать отключить (я проверить не могу, у меня все более-менее нормально отображается)

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

[Softlink]

Теперь окончательно убедился, что дело именно в Хроме 16(...). Кто помнит, я когда-то верстал клавиатуру. Вот на ховере у меня у кнопок появлялся бордер. До 16-го Хрома все было в порядке, бордер появлялся, но ширина оставалась неизменной, т.к. использовал box-sizing:border-box;, теперь он не помогает. Посмотрел, на своей "галерее", которую верстал(там тоже в одном варианте использовал box-sizing), - все в порядке, но там на флоатах все. В итоге методом исключения можно сделать вывод, что в 16-м Хроме любые паддинги и бордеры для элементов с table, table-cell(100%) влияют на ширину блока. Проблему с бордерам можно решить использованием box-shadow(слава богу с ним все нормально работает), а вот с паддингами совсем беда.

[psywalker]

Теперь окончательно убедился, что дело именно в Хроме 16(...). Кто помнит, я когда-то верстал клавиатуру. Вот на ховере у меня у кнопок появлялся бордер. До 16-го Хрома все было в порядке, бордер появлялся, но ширина оставалась неизменной, т.к. использовал box-sizing:border-box;, теперь он не помогает. Посмотрел, на своей "галерее", которую верстал(там тоже в одном варианте использовал box-sizing), - все в порядке, но там на флоатах все. В итоге методом исключения можно сделать вывод, что в 16-м Хроме любые паддинги и бордеры для элементов с table, table-cell(100%) влияют на ширину блока. Проблему с бордерам можно решить использованием box-shadow(слава богу с ним все нормально работает), а вот с паддингами совсем беда.

А покажи плиз работающий пример с box-shadow

[Softlink]

А покажи плиз работающий пример с box-shadow

Держи http://jsfiddle.net/Softlink/pQwQL/

[psywalker]

А покажи плиз работающий пример с box-shadow

Держи http://jsfiddle.net/Softlink/pQwQL/

Погоди, но ща ваще в примере верхний блок больше по ширине, чем нижний?

[Softlink]

А покажи плиз работающий пример с box-shadow

Держи http://jsfiddle.net/Softlink/pQwQL/

Погоди, но ща ваще в примере верхний блок больше по ширине, чем нижний?

Ну так а я про что говорил в предыдущем посте? Да, он шире. Шире ровно на толщину бордеров, т.к. box-shadow не учитывается в размерах блока. Вот так они одинаковы http://jsfiddle.net/Softlink/pQwQL/2/

[psywalker]

Softlink,

Погоди, но смотри. Если делать просто вот так, то нижний блок (с тенью) почему-то становится шире верхнего, и именно слева. http://jsfiddle.net/pQwQL/3/

[s0rr0w]

Softlink,

Погоди, но смотри. Если делать просто вот так, то нижний блок (с тенью) почему-то становится шире верхнего, и именно слева. http://jsfiddle.net/pQwQL/3/

Обман зрения, не?

[Softlink]

Softlink,

Погоди, но смотри. Если делать просто вот так, то нижний блок (с тенью) почему-то становится шире верхнего, и именно слева. http://jsfiddle.net/pQwQL/3/

Он шире, да. Но влияние на размер блока и визуальные размеры - это разные вещи. Грубо говоря, тень подвешена на абсолюте

[psywalker]

Softlink, Погоди, но смотри. Если делать просто вот так, то нижний блок (с тенью) почему-то становится шире верхнего, и именно слева. http://jsfiddle.net/pQwQL/3/

Обман зрения, не?

Неа

Softlink, Погоди, но смотри. Если делать просто вот так, то нижний блок (с тенью) почему-то становится шире верхнего, и именно слева. http://jsfiddle.net/pQwQL/3/

Он шире, да. Но влияние на размер блока и визуальные размеры - это разные вещи. Грубо говоря, тень подвешена на абсолюте

Ааа, теперь ясно, о чём ты. Спасибо.

[SelenIT]

Вот он, голубчик, по ходу дела: http://code.google.com/p/chromium/issues/detail?id=103543

(искал совсем другого бага, а попался этот... но тоже неплохо!)

[lexxcode]

А что за баг? у меня в норме все Chrome v16.0.912.77 m win7

Или это уже не актуально??

SelenIT, хотя по Вашей ссылке, и у меня есть такой косяк...

Edited January 26, 2012 by alexriz