css - 如何强制 Chrome 使用 `box-sizing: content-box` ？ (2 个嵌套 DIV，外部显示为 `table-cell` 。)

Question

目标

See the fiddle对于下面的代码。 我希望根据 the W3C specification of box-sizing: content-box 调整 inner div 的大小，无需修改或删除任何 non-empty CSS declarations , selectors或 HTML elements .(我希望当前的 Chrome 和 Firefox 版本以及 Internet Explorer 11 得到支持。)

HTML:

<div id="outer">
    <div id="inner"></div>
</div>

CSS:

#outer
{
    background:red;
    display:table-cell;
    height:300px;
    width:300px;
}
#inner
{
    background:yellow;
    height:50%;
    padding:75px;
    width:50%;
}

视觉效果:

内部 div 的盒子模型:

问题

Chrome(版本:35.0.1916.153 m，操作系统:Windows 7)中使用了错误的大小调整方法。

视觉效果:

内部 div 的盒子模型:

附加信息

• Chrome 中 inner div 的垂直大小与 the W3C specification of box-sizing: border-box 相同
• 显式设置 box-sizing: content-box 不能解决问题
• FF 和 IE11 都可以正常工作，只有 Chrome 不行
• 仅当 % 用作 inner div 的 height 单位和 outer 时才会出现尺寸问题div 显示为 table-cell
• 说明垂直尺寸问题的 GIF(没有立即增长):

Answer 1

解决方案

float 外部 div；和 add a wrapper div displayed as table , 如果 your original layout得到 messed up by floating . See the fiddle对于下面的代码。

HTML:

<div id="wrapper">
    <div id="outer">
        <div id="inner"></div>
    </div>
</div>

CSS:

#wrapper
{
    display:table;
}
#outer
{
    background:red;
    display:table-cell;
    float:left;
    height:300px;
    width:300px;
}
#inner
{
    background:yellow;
    height:50%;
    padding:75px;
    width:50%;
}

视觉效果:

内部 div 的盒子模型:

替代解决方案

使用#outer {position: absolute} , 或 #outer {position: fixed} ，如果上面的解决方案(#outer {float: left}，或#outer {float: right})不符合您的需求。

附加信息

• 这是 a known bug in Chrome .如果您希望修复它，请单击该链接并添加评论。