6

我正在使用display:table. 对于间距（也来自背景图像），我使用padding. 因为我需要孩子们从可用空间中获得准确width:50%的信息（考虑到 parent 的填充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 中的错误吗？还是我做错了什么？

4

2 回答 2

5

是的，谷歌浏览器错误：

问题 #103543 - CSS 显示：表格错误

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

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

注意： 由于表格布局有能力破坏分配的 css width/ height，最好不要使用它，除非它是类似表格的结构或者你想要内容扩展容器 - 所以你的!importantin width&height不起作用。

于 2012-01-04T17:06:55.313 回答
0

删除 -webkit- 用于 chrome 浏览器。

于 2013-08-21T11:06:51.720 回答