Question

看看这个小提琴（在谷歌浏览器中）：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中看起来很正常。

Answer 1

问题是因为您在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的帮助：）

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

1 个答案: