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中的错误吗？或者我做错了什么？

Answer 1

是的，Google Chrome错误：

Issue #103543 - CSS display: table bug

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

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

注意：由于表格布局能够打破指定的css width / height，因此最好不要使用它，除非它是类似于表格的结构，或者你想要内容扩展容器 - 所以你的{{1在!important＆amp; width无效。

Answer 2

删除-webkit- for chrome browser。

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

2 个答案: