灯箱向前导航箭头在第一张图像后下降

Question

我对lightbox2有一个奇怪的问题。导航过我的div中的第一个图像后，前向箭头下降到图像下方，关闭按钮不会关闭图像，而是在图像中向前导航。

如果使用列显示图片或使用哪些内容，我不会这样做。

HTML

<div id="masonryWrapper">

    <div id="masonryWrapper">
      <div class="masonry">
        <a href="img/work/DSC00967 (2014_10_01 00_23_54 UTC).jpg"data-lightbox="photography">
           <div class="item"><img src="img/work/DSC00967 (2014_10_01  00_23_54 UTC).jpg">
           </div>
        </a>
        <a href="img/work/DSC01365 (2014_10_01 00_23_54 UTC).jpg"  data-lightbox="photography">
          <div class="item"><img src="img/work/DSC01365 (2014_10_01 00_23_54 UTC).jpg">
          </div>
        </a>
   </div>
</div>

CSS

.masonry { /* Masonry container */
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 1em; /* Chrome, Safari, Opera */
-moz-column-gap: 1em; /* Firefox */
column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
display: inline-block;
margin: 0 0 1em;
width: 100%;
overflow: hidden;
position: relative;

}

.item img
{
width: 100%;
transition: all .2s ease-in-out; 
vertical-align: top;

}

.item:hover img
{
transform: scale(1.1);
}

.item:after
{
content: '\A';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background:rgba(255,255,255,0.6);
opacity: 0;
transition: all .2s ease-in-out; 
}

.item:hover:after
{
opacity: 1;
}

#masonryWrapper
{
max-width: 980px;
margin: 0 auto;
margin-top: 10%;
overflow: hidden;

}

Answer 1

看起来这是lightbox.css中的填充问题

我在以下两个类中将填充更改为0 -

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
  padding: 0;
}

填充物导致它从div下面向下推。

Answer 2

对于它的价值，我根本没有看到导航按钮，并且添加填充设置并没有什么作用。