手风琴菜单在 IE8 中不起作用

Posted 2023-05-08

【中文标题】手风琴菜单在 IE8 中不起作用

【英文标题】：Accordion menu is not working in IE8

【发布时间】：2012-11-11 13:33:01

【问题描述】：

我在 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;

【参考方案1】：

Accordion 有一个已知的 IE 错误：https://github.com/twitter/bootstrap/issues/4745

您需要将 Bootstrap 更新到最新版本。

【讨论】：

我正在使用最新版本，并且在您提供的链接处添加到代码中的新行已经存在于我的 CSS 中

我在上面的问题中添加了手风琴 CSS

然后为 IE8 设置这个：.collapse.out overflow:hidden