Неожиданный вертикальный скрол в Chrome и Opera

[illya_v]

Вопрос для знатоков.

Есть такая верстка.

Вопрос заключается в том почему в Chrome и Opera у элемента с классом "panel" появляется вертикальный скрол-бар.

И как от него избавиться. Естественно решение просто убрать overflow: auto не подходит.

Тестировал в Chrome 36 и Opera 20.

Edited August 13, 2014 by illya_v

[afdw]

http://codepen.io/anon/pen/eytjJ

[illya_v]

http://codepen.io/anon/pen/eytjJ

Благодарю, но этот вариант тоже не подходит.

Дело в том что элемент с классом "blank" является представителем целого семейства элеметнов и верстка основывается на том что они inline-block, а представленный фрагмент частный случай.

Кроме того хотелось бы понять "логику" браузеров Chrome и Opera.

Edited August 13, 2014 by illya_v

[ows.nightwolf]

Это из-за display: inline-block. Элемент рассмтаривается как строчный (грубо говоря ваш span - большаааая буква), и у этой буквы высота равна 100% высоты родителя. Но у строк есть еще такой параметр как междустрочный инетрвал (line-height), который видимо и добавляется к вашей высоте span'a. Так что чтобы убрать полосу прокрутки для класса panel можно добавить свойство line-height: 0, либо у класса blank сменить display: inline-block на display: block.

Edited August 13, 2014 by ows.nightwolf

[illya_v]

Это из-за display: inline-block. Элемент рассмтаривается как строчный (грубо говоря ваш span - большаааая буква), и у этой буквы высота равна 100% высоты родителя. Но у строк есть еще такой параметр как междустрочный инетрвал (line-height), который видимо и добавляется к вашей высоте span'a. Так что чтобы убрать полосу прокрутки для класса panel можно добавить свойство line-height: 0, либо у класса blank сменить display: inline-block на display: block.

Вот такого информативного ответа я и хотел. Благодарю Вас.