Question

在我的（测试）网站http://www.corryderek.nl/mkh/media.php?item=2014_09_2的媒体页面上有三个导航箭头：左（上一部电影），上（电影列表）和右（下一部电影）。它们在胶片后面以棕色显示，并且当用户将鼠标移动到胶片上时，应该在胶片前面出现带有赭色的赭色。电影和背景箭头的z-index为40，赭色的导航箭头为50.除了IE（我已经测试了IE11 / Windows 7和IE8 / Windows XP）之外，它的工作原理。

可能出于同样的原因，IE用户无法点击电影区域中的导航箭头。我允许箭头从电影中突出一点，以便IE用户仍然可以访问它们，但我如何说服IE尊重z-index值？我找到了wmode=opaque的技巧，这使得箭头可见，但鼠标仍无法通过。

该网站是荷兰语，但应该很容易导航。 Vorige ， Lijst 和 Volgende 表示Previous，List和Next; Beeld en Geluid 意味着图片和声音。

您可以在http://www.corryderek.nl/mkh/mediapages/2014_09_2.html

上看到iframe外的页面

相关的HTML是：

<div class="media_image"> 
 <img class="nav_up" src="../images/up_b.png" alt="">
 <img class="nav_left" src="../images/left_b.png" alt="">
 <img class="nav_right" src="../images/right_b.png" alt="">
 <iframe class="youtube_512" 
         src="//www.youtube.com/embed/FeBDi0GBjxw?wmode=opaque&rel=0&disablekb=1&showinfo=0"
         allowfullscreen=""
         frameborder="0">
 </iframe>
 <div class="nav_holder">
  <a href="../media.php" target="_parent">
   <img class="nav_up" src="../images/up.png" alt="Lijst" title="Lijst">
  </a>
  <a id="leftkey" href="../media.php?item=2014_09_1" target="_parent">
   <img class="nav_left" src="../images/left.png" alt="Vorige" title="Vorige">
  </a>
  <a id="rightkey" href="../media.php?item=2014_10_1" target="_parent">
   <img class="nav_right" src="../images/right.png" alt="Volgende" title="Volgende">
  </a>
 </div>
</div>

相关的CSS是：

.media_image {
  position: relative;
  z-index: 40;
  top: 0;
  width: 100%;
  text-align: center;
}
.nav_holder {
  position: absolute;
  display: none;
  z-index: 50;
  top: 0;
  right: 0;
  left: 0;
}
.media_image:hover .nav_holder {
  display: block;
}
.nav_up {
  border: 0px solid ;
  position: absolute;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}
.nav_left {
  border: 0px solid ;
  position: absolute;
  top: 70px;
  left: 0px;
}
.nav_right {
  border: 0px solid ;
  position: absolute;
  top: 70px;
  right: 0px;
}
.youtube_512 {
  position: relative;
  top: 15px;
  width: 512px;
  height: 288px;
  margin-bottom: 15px;
}

感谢任何提示或见解，

---德里克

Answer 1

您可以通过将wmode=transparent添加到网址

来解决此问题

<iframe class="youtube_512" 
     src="//www.youtube.com/embed/FeBDi0GBjxw?wmode=transparent&rel=0&disablekb=1&showinfo=0"
     allowfullscreen=""
     frameborder="0">

无法在IE </div>中通过YouTube显示<div>

1 个答案: