0

我有一个宽度为 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/

4

1 回答 1

0

对于您的情况，这是一个可以接受的黑客攻击：

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; } .button { 显示：表格单元格；垂直对齐：中间；}

于 2013-10-27T18:35:34.737 回答