带有显示的边框元素：表格延伸到父级之外

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
• 使用box-sizing: content-box .box上的box-sizing: content-box
• 使用<table>而不是display: table （这只会使Chrome的预览看起来与Safari相同，我宁愿不使用表格元素。）

_{此问题似乎与Chrome与大小调整大小相似：display：table中的border-box ，但该问题已得到修复。}

---

仅供参考：

这只是展示同样问题的最小例子。 实际的问题是我有一个带有display: table的<div> ，其宽度仅由其单元格的宽度（等于单元格的高度）和它们之间的填充来定义。 那个div也碰巧有边界。 该div由另一个浮动到右侧的元素包含。 但是，由于这个问题，当浮动容器完全在右侧时，div溢出屏幕。

Answer 1

将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和default value的box-sizing的content-box ，因此边框都被排除在外。

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

尝试设置display: table-cell到.box内的.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> 

Answer 2

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