Chrome与大小调整大小:显示中的边框:表格

Question

我正在使用一个小的2窗格布局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中的错误吗？或者我做错了什么？

Answer 1

是的,Google Chrome bug:

问题#103543 - CSS显示:表错误

某些情况可以通过添加/删除填充的特定边来解决(如错误报告中的jsfiddle),但您的情况可能无法实现.

如果已知宽度和高度并且您需要方形单元格,则在那里使用浮动更容易且更稳定.

注意: 由于表格布局能够破坏指定的css width/ height,因此最好不要使用它,除非它是类似于表格的结构,或者你想要内容展开容器 - 所以你的!importantin width&height不工作.