Html CSS显示表宽度100%-缺少像素？

我有几个div容器，里面有覆盖层：

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

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

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

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

我遇到了一个奇怪的小问题——尽管开发工具告诉我覆盖的宽度与容器的宽度相同——在某些情况下，覆盖的宽度等于容器的宽度减去1个像素。为什么？我错过了什么？如何解决这个问题？：）

---

根据宽度，计算得到半像素（无法渲染）。我们可以实现这一点，而无需

显示：table

。我不太清楚为什么这只发生在

display:table

中，但将覆盖作为块元素解决了这个问题

在本例中：

• .overlay:before

  将内联元素置于中间。它是一个不可见的元素，排列在覆盖层的左侧

• 关闭和打开div标记之间没有空格，这可以防止内联间隙

CSS/HTML/Demo

body{
保证金：0；
}
.集装箱{
位置：相对位置；
显示：内联块；
垂直对齐：中间对齐；
背景：#fed900；
宽度：25%；
高度：200px；
}
.覆盖：之前{
内容：''；
显示：内联块；
身高：100%；
垂直对齐：中间对齐；
}
.覆盖{
位置：绝对位置；
排名：0；
左：0；
背景：rgba（0,0,0,0.4）；
宽度：100%；
身高：100%；
文本对齐：居中；
}

居中的
居中的
居中的
居中的

Why-3px？我的1像素叠加图像去哪了？：）你的帖子需要解释。请提供一些解释什么宽度的计算？25%中的100%如何包含半像素？我不太喜欢伪元素，但会看到：）非常感谢。伪元素有什么问题。。。浏览器兼容性？半像素的出现是因为在某些宽度下，它的计算值为11.5px，这是不存在的。

.container {
    position: relative;
    display: inline-block;
    background: #fed900;
    outline: solid 5px #000;
    width: 25%;
    height: 200px;
}

.overlay {
    position: absolute;
    top: 0;
    display: table;
    background: rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
}

* {
  margin:0px;
  padding:0px;
}

.container {
  position: relative;
  display: inline-block;
  background: #fed900;
  width: 25%;
  height: 200px;
  margin-right: -3px;
}