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

Question

我有几个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>

问题是，当我将叠加显示设置为表格时（它必须是表格，因为我在垂直和水平方向上对齐东西 - 只是简化了SO的这个例子），如下所示：

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

我得到了奇怪的故障 - 虽然开发人员工具告诉我叠加层与容器的宽度相同 - 在某些情况下，叠加宽度等于容器的宽度减1像素。为什么？我错过了什么？以及如何解决这个问题？ ：）

http://jsfiddle.net/v13mdq57/

Answer 1

根据宽度，计算会给出半个像素（无法渲染）。我们可以在没有display: table的情况下实现这一点。我不太清楚为什么这只会在display: table时出现，但将叠加层保留为块元素可以解决问题。

在这个例子中：

• .overlay:before将内联元素添加到中间。它是一个不可见的元素，排列在左侧里面叠加层。

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

Read more about removing the gap between inline elements.

CSS / HTML / Demo

body { 
    margin: 0;
}
.container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background: #fed900;
    width: 25%;
    height: 200px;
}
.overlay:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    text-align: center;
}

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

Answer 2

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

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