Lightbox2中的导航在较旧的IE版本（IE10及更低版本）上无法正常工作

Question

如果我垂直输入元素而不是水平输入，则只能在自定义Lightbox2中导航。这仅发生在IE8及更低版本。

如果我进入水平导航，获得焦点的元素是“

我试图用z-index解决这个问题，但它无法正常工作

CSS

/* line 63, ../sass/lightbox.sass */
.lb-nav {
  position: absolute;
  top: 0px;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  margin-bottom: -150px;
}

/* line 71, ../sass/lightbox.sass */
.lb-container > .nav {
  left: 0;
}

/* line 74, ../sass/lightbox.sass */
.lb-nav a {
  outline: none;
}

/* line 77, ../sass/lightbox.sass */
.lb-prev, .lb-next {
  width: 40%;
  height: 100%;
  cursor: pointer;
  z-index: 20;
  /* Trick IE into showing hover */
  display: block;
}

/* line 84, ../sass/lightbox.sass */
.lb-prev {
  margin-left: 30px;
  left: 0;
  float: left;
}
/* line 87, ../sass/lightbox.sass */
.lb-prev:hover {
    background: url("../images/lightbox/links-blauw.png") left 48% no-repeat;
}

/* line 90, ../sass/lightbox.sass */
.lb-next {
  margin-right: 30px;
  right: 0;
  float: right;
}
/* line 93, ../sass/lightbox.sass */
.lb-next:hover {
  background: url("../images/lightbox/rechts-blauw.png") right 48% no-repeat;
}

HTML（附加在灯箱JS中）

<div id='lightboxOverlay' class='lightboxOverlay'></div>
<div id='lightbox' class='lightbox'>
    <div class='lb-outerContainer'>
        <div class='lb-container'><img class='lb-image' src='' />
            <div class='lb-nav'>
                <div class='lb-closeContainer'>
                    Venster sluiten <a class='lb-close'>&nbsp;</a>
                </div><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a>
            </div>
            <div class='lb-loader'>
                <a class='lb-cancel'></a>
            </div>
        </div>
        <div class='lb-dataContainer'>
            <div class='lb-data'>
                <div class='lb-details'>
                    <span class='lb-caption'></span><span class='lb-number'></span>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

您必须向lb-prev和lb-next容器添加透明背景图像，以便它们可以触发悬停。

.lb-prev, .lb-next {
width: 49%;
height: 100%;
cursor: pointer;
/* Trick IE into showing hover */
display: block;
z-index:101;
position:relative;
background-image:url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== );
}