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

Chrome vs. box-sizing:border-box in a display:table

我正在使用 display:table 做一个小的 2 窗格布局。对于间距(也来自背景图像)，我使用 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源代码：

1
2
3
4

Something on the left side

Something on the right side

还有css：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

#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 中的错误吗？还是我做错了什么？

是的，谷歌浏览器错误：

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

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

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

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

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/269157.html