jquery - Chrome bumping span 元素在 div 的其余部分下方

Question

我有一个 jquery slider ，其中文本覆盖绝对位于每个选项卡/幻灯片的图像顶部。

在 Firefox 和 IE9 中，一切正常，但在 Chrome 中，文本覆盖被向下推到选项卡 slider 下方。

IE9/火狐:

Chrome :

我不知道是什么原因造成的，并且已经研究了很长时间。通常是 IE 给我这样的问题，因为 Chrome 和 Firefox 都是 Webkit 浏览器。

所以我的问题是:

是什么导致 Chrome 在 slider /选项卡下方弹出文本叠加层？

这是我的压缩 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

您的文字叠加层还需要 top 值:

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