html - 带有显示 :table extends out of parent 的边框元素

Question

这段代码在每个浏览器中似乎都有不同的效果。

.container {
    display: inline-block;
    border: 1px solid black;
    padding-top: 5px;
    padding-bottom: 5px;
}
.box {
    display: table;
    width: 10px;
    height: 10px;
    background-color: red;
    border: 5px solid blue;
}

<div class="container">
    <div class="box"></div>
</div>

在 Chrome 43.0 中，表格不再局限于容器:

在 Safari 5.1 中，边框完全覆盖表格，因为它似乎将宽度解释为包含边框宽度:

在 Firefox 38.0 和 Internet Explorer 11.0 中，表格正确呈现:

理想情况是所有浏览器的行为都类似于 Firefox/Internet Explorer。

使用 box-sizing: border-box并增加 .box 的宽度包括边框宽度使所有浏览器显示 Firefox/Internet Explorer 版本，但假设边框宽度未知，有没有办法让所有主要浏览器根据 Firefox/Internet Explorer 呈现模型(不使用JavaScript)？

以下根本没有帮助:

• 使用 table-layout: fixed在 .box 上.
• 使用 border-collapse: separate在 .box 上
• 使用 box-sizing: content-box在 .box 上
• 使用 <table>而不是 display: table (这只是让 Chrome 的预览看起来与 Safari 的一样，我宁愿不使用表格元素。)

_{这个问题好像和Chrome vs. box-sizing:border-box in a display:table类似，但这个问题已经解决了。}

---

仅供引用:

这只是展示相同问题的一个最小示例。实际问题是我有一个 <div>与 display: table它的宽度仅由其单元格的宽度(等于单元格的高度)和它们之间的填充定义。该 div 也恰好有边框。该 div 包含在另一个向右浮动的元素中。但是因为这个问题，当 float 容器完全靠右时，div溢出屏幕。

Answer 1

将 box-sizing: border-box 设置为 .box 然后给它一个大小 .box 并计算它 边框宽度

像这样:

.container {
    display: inline-block;
    border: 1px solid black;
    padding-top: 5px;
    padding-bottom: 5px;
}
.box {
    display: table;
    width: 20px;
    height: 20px;
    background-color: red;
    border: 5px solid blue;
    box-sizing:border-box;
}

<div class="container">
    <div class="box"></div>
</div>

您的行为是因为 .container 正在调整 .box 的内容和 box 的默认值 -sizing 是 content-box 所以边框被忽略了。

添加了另一个解决方案，因为上述解决方案需要事先知道边框宽度

尝试将 display: table-cell 设置为 .box 中的内容

.container {
    display: inline-block;
    border: 1px solid black;
    padding-top: 5px;
    padding-bottom: 5px;
}
.box {
    display: table;
    border: 5px solid blue;
}

.cell {
    display: table-cell;
    width: 10px;
    height: 10px;
    background-color: red;
}

<div class="container">
    <div class="box">
        <div class="cell"></div>
    </div>
</div>