2012-11-23 41 views
1

IM在WordPress的工作與引導主題,並使用摺疊式菜單從bootstrap.its在所有其他瀏覽器,但IE 8中工作正常,它不工作,所有的數據通過一個菜單overlaped到其他。手風琴菜單是不是在IE8工作

這裏是acccordion菜單代碼:

<div id="accordion2" class="accordion"> 
     <div class="accordion-group"> 
     <div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">B.A Honours Courses</a></div> 
     <div id="collapseOne" class="accordion-body collapse"> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/fashion-design/" class="accordion-toggle">Fashion Design</a></div> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/ba-honours-courses/fashion-styling-image-design/" class="accordion-toggle">Fashion Styling & Image Design</a></div> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/ba-honours-courses/textile-design-for-fashion-and-interiors/ " class="accordion-toggle">Textile Design for Fashion And Interiors</a></div> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/ba-honours-courses/communication-design/" class="accordion-toggle">Communication Design</a></div> 
      <div class="accordion-inner"><a href=" http://pearlacademy.com/ba-honours-courses/interior-architecture-and-design/" class="accordion-toggle">Interior Architecture and Design</a></div> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/ba-honours-courses/interior-product-design/" class="accordion-toggle">Interior Product Design</a></div> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/ba-honours-courses/jewellery-design/" class="accordion-toggle">Jewellery Design</a></div> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/ba-honours-courses/fashion-media-communication/" class="accordion-toggle">Fashion Media Communication</a></div> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/ba-honours-courses/fashion-business-management/" class="accordion-toggle">Fashion Business Management</a></div> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/ba-honours-courses/fashion-marketing-and-retailing-management/" class="accordion-toggle">Fashion Marketing and Retailing Management</a></div> 
     </div> 
     </div> 
     <div class="accordion-group"> 
     <div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2">Postgraduate Diploma Courses</a></div> 
     <div id="collapseTwo" class="accordion-body collapse"> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/postgraduate-diploma-programmes/fashion-design/" class="accordion-toggle">Fashion Design</a></div> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/postgraduate-diploma-programmes/textile-design/ " class="accordion-toggle">Textile Design</a></div> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/postgraduate-diploma-programmes/fashion-retail/" class="accordion-toggle">Fashion Retail</a></div> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/postgraduate-diploma-programmes/fashion-marketing/" class="accordion-toggle">Fashion Marketing</a></div> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/postgraduate-diploma-programmes/garment-manufacturing/" class="accordion-toggle">Garment Manufacturing</a></div> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/postgraduate-diploma-programmes/fashion-merchandising/" class="accordion-toggle">Fashion Merchandising</a></div> 
     </div> 
     </div> 
     <div class="accordion-group"> 
     <div class="accordion-heading"><a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2">Masters Courses</a></div> 
     <div id="collapseThree" class="accordion-body collapse"> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/masters-programmes/ma-design-fashion-and-textile/" class="accordion-toggle">MA Design(Fashion and Textile)</a></div> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/masters-programmes/ma-fashion-marketing/" class="accordion-toggle">MA Fashion Marketing</a></div> 
     </div> 
     </div> 
     <div class="accordion-group"> 
     <div class="accordion-heading"><a class="accordion-toggle" href="#collapseFour" data-toggle="collapse" data-parent="#accordion2">Professional Diploma Courses</a></div> 
     <div id="collapseFour" class="accordion-body collapse"> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/professionals-diploma-courses/luxury-brands/" class="accordion-toggle">Luxury Brands</a></div> 
     <div class="accordion-inner"><a href="http://pearlacademy.com/professionals-diploma-courses/fashion-and-lifestyle-ecommerce/" class="accordion-toggle">Fashion and Lifestyle Ecommerce</a></div> 
     </div> 
     </div> 
     <div class="accordion-group"> 
     <div class="accordion-heading"><a class="accordion-toggle" href="#collapseFive" data-toggle="collapse" data-parent="#accordion2">Diploma Courses</a></div> 
     <div id="collapseFive" class="accordion-body collapse"> 
     <div class="accordion-inner"><a href="http://pearlacademy.com/diploma-course/professional-photography-with-btk-germany/" class="accordion-toggle">Professional Photography with BTK Germany</a></div> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/diploma-course/styling-for-interiors/" class="accordion-toggle">Styling for Interiors</a></div> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/diploma-course/fashion-media-makeup/" class="accordion-toggle">Fashion Media Makeup</a></div> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/diploma-course/retail-operations/" class="accordion-toggle">Retail Operations</a></div> 
     <div class="accordion-inner"><a href="http://pearlacademy.com/diploma-course/apparel-manufacturing/" class="accordion-toggle">Apparel Manufacturing</a></div> 
     </div> 
     </div> 
     <div class="accordion-group"> 
     <div class="accordion-heading"><a class="accordion-toggle" href="#collapseSix" data-toggle="collapse" data-parent="#accordion2">Certificate Courses</a></div> 
     <div id="collapseSix" class="accordion-body collapse"> 
      <div class="accordion-inner"><a href="http://pearlacademy.com/certificate-courses/creative-fashion-technology-in-womens-wear/" class="accordion-toggle">Creative Fashion & Technology in Women's Wear</a></div> 
     </div> 
     </div> 
     </div> 

這裏是引導手風琴的CSS:

.accordion { 
    margin-bottom: 20px; 
} 
.accordion-group { 
    margin-bottom: 2px; 
    /*border: 1px solid #e5e5e5; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px;*/ 
} 
.accordion-heading { 
    border-bottom: 0; 
    background-color:#cccccc; 
} 
.accordion-heading .accordion-toggle { 
    display: block; 
    padding: 2px 4px; 
    text-decoration:none; 
    /*background-color:#e52b27;*/ 
} 
.accordion-toggle { 
    cursor: pointer; 
    color:#5e5e5e; 
    text-decoration:none; 
} 
.accordion-inner { 
    padding: 2px 4px; 
    border-top: 1px solid #e5e5e5; 
    text-decoration:none; 
} 

回答

1

手風琴有一個已知的bug與IE:https://github.com/twitter/bootstrap/issues/4745

您需要將Bootstrap更新爲最新版本。

+0

IM使用的最新版本和新行加入到你給的鏈接已存在於我的CSS –

+0

我已經加入了手風琴CSS在我的問題上面 –

+0

然後設置本作IE8代碼:.collapse.out {溢出:隱藏} –