The problem with the CSS model in Google Chrome: window size + table + height 100% + border

Question

Take a look at this script (in Google Chrome): http://jsfiddle.net/776uaj5b/1/

<div style="background-color: blue;"> <table style="height: 100px;border-spacing: 0;border-collapse: collapse;"> <tr> <td style="height: 100%;width: 100px;"> <div style="height: 100%;background-color: red;"> BOX1 </div> </td> <td style="height: 100%;width: 100px;"> <div style="height: 100%;background-color: red;border-width: 10px;border-color:green;border-style:solid;box-sizing: border-box;"> BOX2 </div> </td> </tr> </table> </div> 

Why is BOX2 pushed to the border value of BOX1? This is mistake?

In Firefox and even in IE, this looks fine.

Answer 1

The problem is that you are using box-sizing in a div . Keep in mind that box-sizing is an experimental technology. One solution I find * is to use box-sizing: border-box;webkit-box-sizing: content-box; and remove it from the inline style in the div (also try to avoid inline styles):

 div { box-sizing: border-box; -webkit-box-sizing: content-box; } 

violin

Link

MDN window size

* using @BoltClock help :)