我在 wordpress 中使用 bootstrap 主题并使用 bootstrap 中的手风琴菜单。它在所有其他浏览器中工作正常,但在 IE 8 中它不起作用,并且所有数据都被一个菜单重叠到另一个菜单。
这是手风琴菜单的代码:
<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>
这是 bootstrap 中手风琴的 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;
}