Different Height Of Select With Html5 And Bootstrap Select

I have a HTML select element that uses Bootstrap Select. If I use HTML5, the button element, that is generated by Boostrap Select to render the select, has a correct height of 24.

Solution 1:

If you are not specifying a correct doctype, the browser switches to quirks mode. It is a fallback solution for older sites whose stylesheets were written before CSS was specified in the current way. MDN provides a "rough" list of differences in layouting in firefox, but there are subtle differences between browsers.

I didn't find a specific rule causing the bug you found, but it has something to do with the percentage height calculation with absolutely positioned children. If you remove position: absolute from .bootstrap-select .dropdown-toggle .filter-option, the height gets calculated correctly (even though you would have to adjust the placement of the carret afterwards).