html - 调整大小时图像之间的 Chrome 1px 间隙

Question

我喜欢这样制作的图像拼贴画:

.artikli{
    -moz-column-count: 3;
    -moz-column-gap: 0px;
    -webkit-column-count: 3;
    -webkit-column-gap: 0px;
    column-count: 3;
    column-gap: 0px;
    max-width: 800px;
    line-height: 0;
 }

.artikli a{
    display: inline-block; 
    margin-bottom: 0px;
    width: 100%;
    position: relative;
    }

但是当我调整 1px 的间隙开始显示在某些窗口尺寸上并且它只在 chrome 上显示时，这是一个屏幕截图:

当我从 .artikli a 中删除 position:relative; 时，间隙消失但悬停不起作用。有什么想法吗？

这是悬停效果:

.hovv {
    width: 100%;
    height: 100%;
    background: #c90055 url(../img/plus.png) no-repeat center center;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: all ease-out 1s;
    -moz-transition: all ease-out 1s;
    -o-transition: all ease-out 1s;
     transition: all ease-out 1s; 
}

.artikli a:hover > .hovv {
     opacity: 0.7;
 }

这是html结构

<a href="imagepath/2014/04/172.jpg" rel="shadowbox[1]"><img width="399" height="600" src="imagepath/2014/04/172.jpg" class="attachment-single-article" alt="17"><span class="hovv"></span></a>

谢谢!

编辑:

所以我忘了写 html 是这样的(使用基础框架，所以一切都是响应式的，这里现在有 3 张图片，就像一个例子，但还会有更多):

<div class="small-8 columns artikli">

 <a href="imagepath/2014/04/172.jpg" rel="shadowbox[1]"><img width="399" height="600" src="imagepath/2014/04/172.jpg" class="attachment-single-article" alt="17"><span class="hovv"></span></a>

 <a href="imagepath/2014/04/172.jpg" rel="shadowbox[1]"><img width="399" height="600" src="imagepath/2014/04/172.jpg" class="attachment-single-article" alt="17"><span class="hovv"></span></a>

 <a href="imagepath/2014/04/172.jpg" rel="shadowbox[1]"><img width="399" height="600" src="imagepath/2014/04/172.jpg" class="attachment-single-article" alt="17"><span class="hovv"></span></a>

</div>

编辑2:

这是悬停不起作用但您可以调整窗口大小的问题。
<强> Fiddle

Answer 1

好的，我正在尝试回答一个我发现不完整的问题。你提到了 classes .artikli 。但是您的代码，尤其是 html 部分没有显示这些类的任何部分。现在我所做的就是将 a:hover 部分添加到您的 css 中，例如...

a:hover {
width: 100%;
height: 100%;
background: #c90055 url(../img/plus.png) no-repeat center center;
position: absolute;
top: 0;
left: 0;
opacity: 0;
-webkit-transition: all ease-out 1s;
-moz-transition: all ease-out 1s;
-o-transition: all ease-out 1s;
 transition: all ease-out 1s; 
}

而不是 .hovv 部分的 css。 fiddle 可以在 http://jsfiddle.net/y4TjN/ 中找到.希望这有帮助。但请记住，我在这里没什么可做的