Question

I’m working on this custom select menu that is part of a forms plugin I’m developing.

In my css I’ve something like this:

.qval-select span {
    font-size: 15px;
    display: block;
    padding: .3em .8em;
    cursor: pointer;
}

The span is an item from the custom select menu.

At some point I need to know the item’s outerHeight() and do some calculations. The problem I’m having is that Chrome reports a height of 25px and every other browser (IE8, IE9, Firefox) reports 27px. The funny part is that only Chrome seems to be getting the number I’m looking for.

To see what I mean, I uploaded an example here:

http://spacirdesigns.com/idealforms/.

The problem is evident when you open the custom select menu and scroll with the up and down arrows. As you can see, every browser except Chrome will count 2 extra pixel and screw up the whole thing.
If you open the console you can see the log of the height and compare to other browsers.

If I set a height in px for the span everything works fine, but the beauty of having a custom select is to be able adapt it to many sizes so I need em. I also tried setting the font in em and changing the font as well, but nothing.

Can somebody tell me what’s happening here and why? It’s driving me nuts.

scrollToItem: function() {
    // Select.sub.scrollTop(0);
    var idx = Select.items.find('.selected').parent().index(),
        height = Select.items.outerHeight(),
        items = Select.items.length,
        allHeight = height * items,
        curHeight = height * (items - idx);
    console.log(height);
    Select.sub.scrollTop(allHeight - curHeight);
},

Answer 1

It’s because EM is based on the browser. There’s no way around this, except to account for the changes somehow.

Chrome says .3 EM = 5px, other browsers say 6px. It’s your padding that’s making the height larger, and as your padding is in EM, you end up with different heights.