Chrome与box-sizing:显示中的边框:表格

Question

我正在使用display:table做一个小的两个窗格的布局。对于间距(也来自背景图像)，我使用padding。因为我需要孩子从可用的空间获得一个确切的width:50% (考虑到父div的填充)，所以我使用box-sizing:border-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中的一个bug吗？还是我做错了什么？

Answer 1

是的，Google chrome bug：

Issue #103543 - CSS display: table bug

某些情况可以通过添加/删除特定方面的填充(如bug报告中的jsfiddle )来解决，但您的情况可能无法解决。

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

注意：因为表格布局有能力打破分配的css width/height，所以最好不要使用它，除非它是表格一样的结构或者你想要展开容器的内容-所以你的!important in width & height是不工作的。

Answer 2

Remove -webkit-用于chrome浏览器。