谷歌Chrome CSS盒子模型问题:盒子大小+表+ 100%高度+边框

时间:2014-12-15 19:07:14

标签: css css3 google-chrome css-tables

看看这个小提琴(在谷歌浏览器中):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>

为什么BOX2被BOX1的边界量向下推?这是一个错误吗?

在Firefox甚至IE中看起来很正常。

1 个答案:

答案 0 :(得分:3)

问题是因为您在box-sizing中使用div。请记住,box-sizing是实验技术。我发现*的一个解决方案是使用box-sizing: border-box;webkit-box-sizing: content-box;并将其从div中的内联样式中删除(也请尽量避免使用内联样式):

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

fiddle

<强>参考

MDN box-sizing

*使用@ BoltClock的帮助:)