Why `overflow-x` changes the height of the inline-block box in Firefox and IE?

Issue

Take a look at this jsFiddle.

http://jsfiddle.net/beatak/7UrGA/show/

I want to make a text looking straight. By changing overflow-x:hidden on .boxless-select-text, you can see the baseline shifting. It does NOT happen on Webkit Browsers (Google Chrome and Safari).

Solution

Try this:

.boxless-select-text {
    ...
    vertical-align: bottom;
}

Answered By – lanaluna

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0