在其余div下方的镀铬碰撞跨度元素

Question

我有一个jquery滑块，其中文本叠加层绝对位于每个标签/幻灯片的图像顶部。

在Firefox和IE9中，一切都工作得很花哨，但在Chrome中，文本叠加层在选项卡滑块下面突然降低。

IE9 /火狐：

铬：

我不知道造成这种情况的原因，并且已经有很长一段时间了。由于Chrome和Firefox都是Webkit浏览器，因此IE通常会给我带来这样的问题。

所以我的问题是：

是什么原因导致Chrome在滑块/标签下面碰撞文字叠加层？

这是我的精简HTML：

  

<!-- 1st header and pane -->
<img class="tab" src="images/biochem-1.jpg" />
<div style="width:720px; display:block"> 
  <img src="images/biochem-2.jpg"></a>
  <a href="#"><span class="text-overlay transparent">
    <p> Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra. </p> 
  </span></a>
</div>

<!-- 2nd header and pane -->
<img class="tab" src="images/particle-1.jpg" />
<div>
  <img src="images/particle-2.jpg" />
  <a href="#"><span class="text-overlay transparent">
    <p> Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra. </p>
  </span></a>
</div>

这是我的CSS：

    /* transparent bg */
.transparent {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
}

/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion {
    background:#fafafa;
    height:250px;
    width:1000px;
    border:1px solid #ddd;
    margin: 0 auto;
    overflow: hidden;
}

/* accordion header */
#accordion img.tab {
    float:left;
    margin-right:0px;
    cursor:pointer;
    opacity:1;
    filter: alpha(opacity=50);
    position: relative;
}

/* currently active header */
#accordion img.current {
    cursor:default;
    opacity:1;
    filter: alpha(opacity=100);
}

/*
  accordion pane. should initially have zero width and display:none.
  the first pane should override these with inline style
  */
#accordion div {
    width:0px;
    float:left;
    display:none;
    margin-right:0px;
    position: relative;
}

/* content inside a pane should have fixed width */
#accordion div img {
    line-height: auto;
    width:720px;
    border: none;
}

#accordion div p {
    color: #FFFFFF;
    font-size: 16px;
    padding-left: 15px;
    padding-right: 15px;
}

.text-overlay {
    height: 250px;
    left: 470px;
    position: absolute;
    width: 250px;
}

这是我的JS：

    $(document).ready(function() {

  $(function() {
  $("#accordion").tabs("#accordion div", {
      tabs: 'img.tab',
      effect: 'horizontal',
      //event: 'mouseover'

      // start from the beginning after the last tab
      rotate: true      
    }).slideshow({autoplay:true});
    });
});

Answer 1

您的文字叠加层也需要最高值：

.text-overlay {
    height: 250px;
    top: 0;
    left: 470px;
    position: absolute;
    width: 250px;
}