带有 display:table 的边框元素从父元素中延伸出来

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）？

以下内容根本没有帮助：

• 在.box 上使用table-layout: fixed。
• 在.box 上使用border-collapse: separate
• 在.box 上使用box-sizing: content-box
• 使用 <table> 而不是 display: table（这只是让 Chrome 的预览看起来与 Safari 的相同，我不想使用表格元素。）

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

---

仅供参考：

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

Answer 1

您可以在 .container 中添加：宽度：20px

Answer 2

将box-sizing: border-box 设置为.box，然后将其大小设置为.box 计算border-width

像这样：

.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 的default value 是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>