调整大小时图像之间的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>

EDIT2：

这是问题，只是悬停不起作用，但你可以调整窗口大小 的 Fiddle

Answer 1

好的我正试图回答一个我发现不完整的问题。你提到过类.artikli。但是你的代码尤其是html部分没有显示这些类的任何部分。现在我所做的就是在你的CSS中添加a：hover部分，比如......

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的一部分。小提琴可以在http://jsfiddle.net/y4TjN/中找到。希望这会有所帮助。但请记住，我在这里工作很少