0

各タブ/スライドの画像の上にテキストオーバーレイが完全に配置されるjqueryスライダーがあります。

FirefoxとIE9ではすべてがうまく機能していますが、Chromeではテキストオーバーレイがタブスライダーの下にぶつかっています。

IE9 / Firefox： ここに画像の説明を入力してください

クロム： ここに画像の説明を入力してください

何が原因なのかわからないので、かなり前から取り組んでいます。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 に答える