Question

我有一个宽度为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和＆amp ;; Chrome浏览器/ Opera中的IE和错误（使用Blink的laster版本）。注意每个.overlay右侧的1像素间隙：

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

Answer 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.9%;  /*Hack */
    height: 100%;
    background: rgba(0,0,0,0.5);
}

.overlay：hover { 背景：＃000; } .button { 显示：table-cell; vertical-align：middle; }

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

1 个答案: