jQuery returning different heights for the same objects in WebKit (chrome) and Firefox

Question

Im perplexed by this one.

jQuery.height() is coming back with different values in Firefox and Chrome. Measuring the pixels on-screen indicates that of the two, Chrome ap

Answer 1

Firefox and in general, Gecko based browsers differ from others in that they try to do subpixel layout and rendering.
This can make life hard especially if you work with table cells that are sized based on their contents.
IE, Webkit and Gecko can report different dimensions - the latter reporting some exotic fractional sizes as well.
As for the bug: after struggling with something similar - measuring dimensions of dynamically sized table cells - for a while, I had ended up special casing for fractional numbers.

As it influences positions as well as dimensions, some people ended up using clientWidth instead of jQuery's 'innerWidth()', while some just use parseInt() on the returned results. (Search for fract in the sources.)

If that is not satisfactory, you may try the following:

• render the primary table with "visibility:hidden" by default so that it is laid out but not displayed
• measure the cell heights from jQuery
• round the heights to the nearest integer value in the primary table and apply as an inline style (rounding up may be a good idea to ensure that cells don't cut contents by 1px)
• render the secondary table based on these integer values and restore visibility of primary table

It might still occur that the borders are misaligned - this can be the case if the position of the primary and secondary tables are not the same (e.g.: primary top: 123.75px, secondary top: 123px.) In that case, placing the tables in a common container or just repositioning to integer coordinates may help.

Good luck...

Edit: As far as I remember, because of some IE and border-collapse anomalies, I resorted to the (deprecated) cellspacing property - that should be placed on the table element into HTML, not CSS - and specified separate borders with a dimension of 0 in CSS. I placed the whole table in a div with a nice background-color.
The whole thing had the effect as if the table borders were 1px, collapsed having the color of the background div....

Answer 2

Firefox is a piece of crap. Adding a container <div> and running outerHeight() on that fixes the issue.

Answer 3

I had the similar problem, that seems to be a bug although i am not 100% sure. If for example, a certain element has padding, the innerHeight() didn't show the same result in Webkit and Firefox. As temporary fix, I used both innerHeight() as well as height() to get the right height for that element.

Similarly, I wasn't able to use the height() to show the same across browsers (IE and others). I used something like this that worked across browsers:

$("#element").css('height', '100');

See also innerHeight() and outerHeight() when you want to include padding / borders / margins.

Answer 4

Have you tried not styling the TD elements at all, but instead the DIV elements that wrap the cell? Then, calculate and set the DIV heights because that is more reliable? Let the table set the cell height automatically based on its content. This, because you already proved that the different browsers calculate TD heights differently (with border...)