I’m trying to debug why a layout looks different in Opera than it does in Google Chrome and other browsers, and in doing so I noticed that Chrome was reporting two different heights for the same div.
In the Metrics section of Chrome Developer Tools it states the height is 96px with 10px padding top and bottom, so 116px total height. But in the yellow tool-tip below the div on screen, it states the height as 132px.
Opera displays the div with a total height of 116px. Because of the horizontal scrollbar being added this clips the content slightly at the bottom and so it adds a vertical scrollbar as well. All other browsers (Chrome, FF, IE) display the div with a total height greater than 116px.
In Chrome I checked the offsetHeight of the div, and it is 132px. So it seems metrics in Chrome developer tools isn’t very good for debugging layout issues.
As you say, only thing I can think of regarding the layout difference between Opera and the other browsers is that most browsers might automatically add the scrollbar height to the div while Opera doesn’t.