0

我有一个 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});
    });
});
4

1 回答 1

0

您的文本覆盖还需要最高值：

.text-overlay {
    height: 250px;
    top: 0;
    left: 470px;
    position: absolute;
    width: 250px;
}
于 2013-01-28T14:07:25.120 回答