谷歌浏览器 CSS 框模型问题：box-sizing + table + 100% height + border答案

【问题标题】：Google Chrome CSS box model issue: box-sizing + table + 100% height + border谷歌浏览器 CSS 框模型问题：box-sizing + table + 100% height + border
【发布时间】：2014-12-17 23:27:23
【问题描述】：

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

【问题讨论】：

对我来说看起来不错。 . .
我永远不会厌倦看到“它甚至可以在 IE 上运行”。
严肃地说，这可能相关吗？ stackoverflow.com/questions/19068909/…
对我来说 BOX1 被向下推了 1px，就像 td 有 1px 的填充一样。您可以通过将padding: 0; 设置为td 来摆脱它。

标签： css google-chrome css-tables

【解决方案1】：

问题是因为您在div 中使用了box-sizing。请记住，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 的帮助下:)

【讨论】：

鉴于没有对应的-ms-box-sizing 属性，最好设置box-sizing: border-box; -webkit-box-sizing: content-box。只要 Chrome 继续支持前缀。
谢谢@BoltClock 我认为更好；）