4

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.

Dmitriy Korotkov
  • 43
  • 4

1 Answers1

3

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 :)

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Alex Char
  • 32,879
  • 9
  • 49
  • 70
  • Given that there's no corresponding `-ms-box-sizing` property, it may be a better idea to set `box-sizing: border-box; -webkit-box-sizing: content-box` instead. As long as Chrome continues to support the prefix anyway. – BoltClock Dec 15 '14 at 19:21