Chrome对比大小调整：显示中的边框：表格 [英] Chrome vs. box-sizing:border-box in a display:table

问题描述

我使用 display：table 做一个小的双窗格布局。对于间距（也从背景图像），我使用 padding 。因为我需要孩子从可用空间有一个精确的宽度：50％（考虑到父 div ），我使用 box-sizing：border-box 。

I'm doing a small 2-pane layout using display:table. For spacing (also from the background image), I use padding. As I need the children to have an exact width:50% from the available space (taking regard for the padding of the parent div), I use box-sizing:border-box.

在Chrome中， box-sizing：border-box 或者甚至 -webkit-box-sizing：border-box 忽略。

This works fine in Opera, but in Chrome the box-sizing:border-box or even -webkit-box-sizing:border-box is silently ignored.

我做了一个演示，显示了问题。两个红色框应为正方形，蓝色框的宽度和高度应为200px： http://jsfiddle.net / fabb / JKECK /

I made a demo which shows the issue. The two red boxes should be square and the blue box should be 200px in width and height: http://jsfiddle.net/fabb/JKECK/

这里是html源代码：

Here's the html source:

<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中的错误吗？

Is this a bug in Chrome? Or am I doing something wrong?

推荐答案

是的，Google Chrome错误：

Yes, Google chrome bug:

问题＃103543 - CSS显示：table bug

有些情况可以通过添加/删除填充的特定边来解决（例如bug报告中的jsfiddle），但是你的情况可能不可能。

Some case may be resolved by addding/removing specific side of padding (like the jsfiddle in the bug report), but your case may not be possible.

如果已知宽度和高度，并且想要方形单元格，使用float就更容易和更稳定。

It is easier and more stable by using float there, if width and height is known and you want square cells.

注意：
由于表布局能够中断分配的css width / height ，最好不要使用它，除非它是表样结构或者你想要的内容展开容器 - 所以你的！important 在 width & height 无效。

Note: Since table layout have the ability to break the assigned css width/height, it is better not using it unless it is table-like structure or you want to contents expand the container - so your !important in width & height is not working.

这篇关于Chrome对比大小调整：显示中的边框：表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！