Box style category dropdown on Chrome always forces scrollbar

When the box-style category badge is used, it always forces a scrollbar in the category dropdown menu when using the latest Chrome browser. With Firefox .cat div is pushed down, producing a gap between categories, but it doesn’t force a scrollbar. With Safari and iOS it displays properly (no gap between categories and no scrollbar.)

It seems to have something to do with the line-height. The css for making the badge is kind of complicated.


Thanks to Stack Overflow:

Here’s what’s causing the problem:

The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.

Changing span from overflow: hidden; to overflow: visible; fixes it.

Edit: Setting vertical-align: text-top on the .category-dropdown-menu link accomplishes the same thing, but would allow you to set a max-width on the category name span and have the name truncated with ellipsis. (there’s currently no max-width on the menu’s box-style category span.)