引導旋轉木馬 - CSS3 PIE打破指標循環

所以在很多我喜歡用CSS3 PIE，使IE 7-9做邊界半徑裝修圓形圖片等引導旋轉木馬 - CSS3 PIE打破指標循環

對於我使用的是一個新的網站網站Twitter Bootstrap上的Carousel插件，我想讓IE用戶很好地呈現輪播指標。

我傳送帶正常工作正常，通過正確等自行車，但是當我申請的PIE行爲轉盤指標舊IE瀏覽器（使用PIE的JavaScript版本），它從幻燈片循環正常停止的指標。顯而易見的解決方案是爲傳送帶指示器移除CSS3 PIE（讓舊IE瀏覽器的用戶看起來很難看），但理想情況下，我想讓它工作。

開頭代碼片段：

<!--[if (IE 7)|(IE 8)]> 
    <script type="text/javascript" src="//cdn.jsdelivr.net/css3pie/2.0b1/PIE_IE678.js"></script> 
<![endif]--> 
<!--[if IE 9]> 
    <script type="text/javascript" src="//cdn.jsdelivr.net/css3pie/2.0b1/PIE_IE9.js"></script> 
<![endif]-->

機身碼片段：

<div id="myCarousel" class="carousel slide"> 
      <ol class="carousel-indicators"> 
       <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
       <li data-target="#myCarousel" data-slide-to="1"></li> 
       <li data-target="#myCarousel" data-slide-to="2"></li> 
      </ol> 
      <div class="carousel-inner"> 
       <div class="item active"> 
        <img src="http://twitter.github.io/bootstrap/assets/img/examples/slide-01.jpg" alt=""/> 
       </div> 
       <div class="item"> 
        <img src="http://twitter.github.io/bootstrap/assets/img/examples/slide-02.jpg" alt=""/> 
       </div> 
       <div class="item"> 
        <img src="http://twitter.github.io/bootstrap/assets/img/examples/slide-03.jpg" alt=""/> 
       </div> 
      </div> 
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
      <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> 
    </div>

然後PIE：

<script type="text/javascript"> 
     $(function() { 
      if (window.PIE) { 
       $('.carousel-indicators li').each(function() { 
        PIE.attach(this); 
       }); 
      } 
     }); 
</script>

我猜的問題在於，我們」的方式已經有了活動和不活動的指標，並且他們在幻燈片上不斷變化...但我不確定如何修復它。

完整的代碼是http://www.edwardb.co.uk/test/，你顯然需要使用舊版本的IE。

來源

2013-07-25 Westyfield2

你不需要PIE在IE9上做border-radius;它本地支持它。 PIE只在IE9中用於漸變。如果你所使用的是圓角，你可以放棄IE9。如果您決定走這條路線，那麼這個決定應該會讓您更輕鬆地放棄舊版本（IE8）的PIE。 – Spudley

很高興知道，謝謝。使用IE6和IE8作爲我的舊測試虛擬機，所以必須承認我還沒有真正在IE9中測試它！不過，IE8是我的理想目標......因爲這是Win XP的「最新」IE。 – Westyfield2

好吧，我仍然傾向於考慮放棄IE8的圓角。它肯定不會看*那*不好？我喜歡CSS3Pie這樣的工具，但是有一段時間他們不值得這樣做，那時候他們需要更多的工作，而不僅僅是一個簡單的插件而去。 – Spudley

我有同樣的問題，並找到解決方案來解決它。的原因是問題通過css3pie添加的CSS3容器標籤：

<ol class="carousel-indicators"> 
    <css3-container ...>...</css3-container> 
    <li>...</li> 
    <css3-container ...>...</css3-container> 
    <li>...</li> 
    ... 
</ol>

當活動滑塊項目改變時，轉盤的js激活的第n個轉盤指示器（包括CSS3容器標籤）。在第一個項目可見的情況下，「carousel-indicators」的第一個子節點具有「活動」類。

我的解決方案是綁定到「滑動」事件，它會在新項目設置爲活動狀態後觸發。該解決方案的唯一問題是，傳送帶js本身也使用「滑動」事件來激活當前指示符。因爲我剛剛添加了setTimeout調用，如果有任何其他可能性，請告訴我。

$('.carousel').on('slid', function(e) { 
    if($('html').is('.lt-ie9')) { 
     var carousel = $(this); 
     var items = $('.carousel-inner .item', carousel); 
     var indicators = $('.carousel-indicators', carousel).children(); 
     if (items.length !== indicators.length) { 
      setTimeout(function() { 
       var active_index = items.filter('.active').index(); 
       indicators.removeClass('active'); 
       $(indicators.filter('li').get(active_index)).addClass('active'); 
      }, 250); 
     } 
     return false; 
    } 
});

來源

2013-11-14 17:03:35

引導旋轉木馬 - CSS3 PIE打破指標循環

回答

相關問題