html - Chrome 与 box-sizing :border-box in a display:table

Question

我正在使用 display:table 进行小型 2 Pane 布局。对于间距(也来自背景图像)，我使用 padding。因为我需要 child 从可用空间中获得一个精确的 width:50%(考虑到父级 div 的填充)，我使用 box-尺寸:边框框。

这在 Opera 中运行良好，但在 Chrome 中 box-sizing:border-box 甚至 -webkit-box-sizing:border-box 都被默默地忽略了。

我制作了一个展示问题的演示。两个红色框应该是正方形，蓝色框的宽度和高度应该是 200px:http://jsfiddle.net/fabb/JKECK/

这是 html 源代码:

<div id="table">
    <div id="left">
        Something on the left side
    </div>    
    <div id="right">
        Something on the right side
    </div>
</div>

还有CSS:

#table {
    display: table;
    /*border-collapse: collapse;*/

    width: 200px !important;
    height: 200px !important;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;

    margin: 0;
    border: 1px solid blue; 
    padding: 60px 20px;
}

#table #left, #table #right {
    display: table-cell;

    width: 50%;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;

    margin: 0; 
    border: 1px solid red;
    padding: 0; 
}

这是 Chrome 中的错误吗？还是我做错了什么？

Answer 1

是的，谷歌浏览器错误:

Issue #103543 - CSS display: table bug

有些情况可以通过添加/删除特定的填充边来解决(比如错误报告中的 jsfiddle)，但您的情况可能无法解决。

如果宽度和高度已知并且您想要方形单元格，则使用 float 在那里更容易和更稳定。

注意:由于表格布局能够打破指定的 css width/height，除非是类似表格的结构或者您希望内容扩展容器，否则最好不要使用它- 所以你的 !important in width & height 不工作。