Google Chrome CSS box model issue: box-sizing + table + 100% height + border

问题

Take a look at this fiddle (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 the BOX2 pushed down by the amount of border of BOX1? Is this a bug?

In Firefox and even IE it looks normal.

回答1:

The problem is because you are using box-sizing in the div. Keep in mind that box-sizing is 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 div(also please try to avoid inline styles):

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

fiddle

Reference

MDN box-sizing

*with @BoltClock's help :)

来源：https://stackoverflow.com/questions/27491278/google-chrome-css-box-model-issue-box-sizing-table-100-height-border