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>

在Chrome43.0中，table不限于容器：

在 Safari 5.1 中，边框完全与 table 重叠，因为它似乎将宽度解释为包含边框宽度：

在 Firefox 38.0 和 Internet Explorer 11.0 中，table 正确呈现：

理想情况是所有浏览器的行为都类似于 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 的相同，我宁愿不使用 table 元素。 )

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

仅供参考：

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

Answer 1

你可以在.container中添加：width: 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>

display:table 的边框元素超出了父元素

Bordered element with display:table extends out of parent

html

css

safari

google-chrome