Browsers confused in the block model for tables

In the process of creating a new version of my grid in JavaScript, I ran into a not-so-nice bug. And where I least expected it ...

It would seem that in the courtyard of 2012, new versions of browsers are released, almost every month, and their manufacturers report on the implementation of even draft standards. As in such a situation, one could expect problems with the "ancient" tablets and styles responsible for their size.

It seems that browser makers in the race for the number of draft drafts introduced have forgotten that standards need not only to be maintained, but also to be supported correctly and equally.

Introduction

Since it was decided to completely rewrite the grid for HTML5 (abandoning crutches for older versions of IE and fully incorporate the new CSS3 features), I wanted to make the grid look the same in all browsers, and look like grids in desktop software (without any jumping fonts, height lines, inline editing, etc.).

When I started to look at the details, I noticed that in Chrome, the rows of the tables for some reason were larger in height than in other browsers. I decided to find out what was the matter.

Testing

Made a small test page. Which displays the DIV (as a reference for comparison) and the table in which one cell (for our test is more than enough).

At the DIV block and TD table cell, we expose the same dimensions and CSS border in CSS, for clarity.

div, td{
	width:100px;
	height:100px;
	border:25px solid #333;
}

At the table itself we remove the border. All margin and padding are nullified, cellspacing is also (I tried the border-collapse property - the result is similar).

There are 4 examples on the page, with the standard block model (content-box) and using box-sizing: border-box, as well as with the prescribed width of the table and without it (it turned out, here, too, the browsers do not have a single opinion).

The latest releases of the main browsers took part in testing:

• Chrome 16
• Firefox 9.0.1
• Internet Explorer 9
• Opera 11.61

The test was conducted on Windows 7 x64.

results

For the convenience of analyzing the results, I reduced the screenshots of the browsers into one image (clickable). As you can see, the closest rendering result is shown when the border – box block model is turned on and the table width is set. In this case, we get the same rendering in 3 browsers from 4. Just the same Chrome bug surfaced because of which, I started this debriefing. In the standard W3C block model, browsers are divided into pairs. Moreover, interestingly, the rendering in the content-box is the same for Chrome and IE9, and in the border-box, IE9 and Opera give out the identical “picture”. Also note that IE9 and Opera already use the box-sizing property without prefixes, unlike Chrome and FireFox.

Conclusion

I haven’t found an optimal solution yet, I limited myself to a crutch for Chrome. For it, the height of the cells is less.

Who are the dev-assemblies of browsers, unsubscribe in the comments on how they behave.
Test page here .