Question

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

在Chrome 43.0中，表格不限于容器：

Chrome preview

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

Safari preview

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

Firefox and Internet Explorer Preview

理想情况是所有浏览器都与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由另一个浮动到右侧的元素包含。但是，由于这个问题，当浮动容器完全在右侧时，div会溢出屏幕。

Answer 1

将box-sizing: border-box设置为.box，然后将其设为.box，并将其计入border-width

像这样：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

您的行为是因为.container正在调整.box的内容而default value的{{1}}为box-sizing所以边界正在变为遗漏了

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

尝试将content-box设置为display: table-cell

内的内容

＆＃13;

.box

＆＃13;

.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;
}

＆＃13;

Answer 2

您可以添加.container：width：20px

带显示的边框元素：表格延伸到父

2 个答案: