CSS - WebKit 表格单元显示 100% 缺少 1 个像素的宽度？答案

【问题标题】：CSS - WebKit table-cell display 100% lacks 1 pixel of width?CSS - WebKit 表格单元显示 100% 缺少 1 个像素的宽度？
【发布时间】：2013-10-26 22:42:50
【问题描述】：

我有一个宽度为 100% 的图像叠加层，叠加层显示为 table-cell，不幸的是，对于所有 WebKit 浏览器，100% 的宽度似乎是 100% 减去 1 个像素。知道为什么会发生这种情况以及如何解决吗？

这是 HTML：

  <ul class="portfolio">
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li>
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li>
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li>
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li>
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li>
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li>
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li>
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li>
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li>
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li>
  </ul>

还有 CSS：

body {
  background: #222;
}

.portfolio li {
  display: inline-block; 
  background: #fff;
  width: 19%;
  margin: 1% 2%;
  height: 100px;
}

.image {
  position: relative;
  text-align: center;
  overflow: hidden;
  background: green url('http://cool-iphonewallpapers.com/download/green-background.jpg') center center no-repeat;
  height: 100px;
}

.overlay {
    display: table;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}

.overlay:hover {
  background: #000;
}

.button {
  display: table-cell;
  vertical-align: middle;
}

示例代码在 Firefox 和 IE 中看起来不错，而在 Chrome / Opera 中看起来有问题（使用 Blink 的最新版本）。注意每个 .overlay 右侧的 1 个像素间隙：

http://jsbin.com/afAmIhO/1/

【问题讨论】：

我认为这是 Chromium 项目中的一个错误。我无法在我的 Mac 上的 Safari 7.0 (9537.71) 上复制它。也许您应该向Chromium project 提交错误
正如 Tyler Eich 所说，Chromium 中有一个错误。尝试将类覆盖更改为宽度：100.9%。
好的，谢谢，知道他们需要多长时间才能修复它？ tis 100.9% 宽度的技巧是否安全（在旧浏览器中不会造成混乱）？ @SpencerLeonard，以 100.9% 的想法回答这个问题，这样我就可以接受它作为答案。
我不确定即时管道中是否有修复。我知道 Chrome 开发团队已经意识到并正在调查这个问题。这是我能给你的最好的。

标签： css width css-tables

【解决方案1】：

对于您的情况，这是一个可接受的 hack：

HTML：

  <ul class="portfolio">
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div> </div></a></li>
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li>
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li>
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li>
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li>
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li>
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li>
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li>
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li>
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li>
  </ul>

CSS：

body {
    background: #222;
}
.portfolio li {
    display: inline-block; 
    background: #fff;
    width: 19%;
    margin: 1% 2%;
    height: 100px;
}
.image {
    position: relative;
    text-align: center;
    overflow: hidden;
    background: green url('http://cool-iphonewallpapers.com/download/green-background.jpg') center center no-repeat;
    height: 100px;
}
.overlay {
    display: table;
    width: 100.9%;  /*Hack */
    height: 100%;
    background: rgba(0,0,0,0.5);
}

.overlay:hover { 背景：#000； } 。按钮 { 显示：表格单元格；垂直对齐：中间； }

【讨论】：