Question

我创建了一个具有多行的bootstrap折叠手风琴，并且只允许在所有行之间一次打开一个选项卡。除了Internet Explorer之外，所有浏览器中的打开/关闭动画都能顺利运行。在iE中，当一个标签打开时，其他标签有时会跳到下一行，这很尴尬，我不希望它这样做。有办法解决这个问题吗？

这是我的codepen的链接。尝试在Chrome和Internet Explorer中打开此链接，您将看到差异。 http://codepen.io/aahmed2/pen/yOQvVz

<div class="row">

<div class="panel panel-default col-md-4">
  <div class="panel-heading  bites-stings" role="tab" id="headingSeven">
    <a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
      <h2>Bites and Stings</h2>
    </a>
  </div>
  <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
    <div class="panel-body">
      <a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a>
      <a href="health-resources/ticks.html"><h4>Ticks</h4></a>
      <a href="#"><h4>Bees and Wasps</h4></a>
      <a href="#"><h4>Animal Bites</h4></a>
    </div>
  </div>
</div>


<div class="panel panel-default col-md-4">
  <div class="panel-heading pet-health" role="tab" id="headingTwo">
    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      <h2>Pet Health and Safety</h2>
    </a>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
    <div class="panel-body">
      <a href="#"><h4>Pet Allergies</h4></a>
      <a href="#"><h4>Toxic Plants</h4></a>
      <a href="#"><h4>Pet and Wildlife Encounters</h4></a>
    </div>
  </div>
</div>


<div class="panel panel-default col-md-4">
  <div class="panel-heading livestock-health" role="tab" id="headingThree">
    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
      <h2>Livestock Health and Safety</h2>
    </a>
  </div>
  <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
    <div class="panel-body">
      <a href="#"><h4>This is a Topic</h4></a>
      <a href="#"><h4>Topic 2</h4></a>
      <a href="#"><h4>Another Topic</h4></a>
    </div>
  </div>
</div>

<div class="row">
  <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default col-md-4">
      <div class="panel-heading zoonotic" role="tab" id="headingFour">
        <a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
          <h2>Zoonotic Diseases</h2>
        </a>
      </div>
      <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
        <div class="panel-body">
          <a href="#"><h4>Bacterial</h4></a>
          <a href="#"><h4>Fungal</h4></a>
          <a href="#"><h4>Parasitic</h4></a>
          <a href="#"><h4>Prionotic</h4></a>
          <a href="#"><h4>Rickettsial</h4></a>
          <a href="#"><h4>Spirochetes</h4></a>
          <a href="#"><h4>Viral</h4></a>
        </div>
      </div>
    </div>


    <div class="panel panel-default col-md-4">
      <div class="panel-heading allergies" role="tab" id="headingFive">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
          <h2>Allergies</h2>
        </a>
      </div>
      <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
        <div class="panel-body">
          <a href="#"><h4>Animal Allergies</h4></a>
          <a href="#"><h4>Environmental Allergies</h4></a>
        </div>
      </div>
    </div>


    <div class="panel panel-default col-md-4">
      <div class="panel-heading environment-health" role="tab" id="headingSix">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
          <h2>Environmental Health</h2>
        </a>
      </div>
      <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
        <div class="panel-body">
          <a href="#"><h4>This is a Topic</h4></a>
          <a href="#"><h4>Topic 2</h4></a>
          <a href="#"><h4>Another Topic</h4></a>
        </div>
      </div>
    </div>
  </div>
</div>

和CSS

#accordion2 {
  margin-top: -20px;
}

.panel-heading:focus {
  outline: 0;
  border: none;
}

.panel-group .panel {
  border-width: 0;
  padding: 0 !important;
  border-radius: 0%;
}

.panel-group .panel-heading {
  height: 100px;
  text-align: center;
  color: #fff;
  padding-top: 2%;
  border: 1px solid #fff;
  border-radius: 0%;
  background-color: rgba(0, 0, 0, 0.5);
}

.panel-group .panel-heading h2 {
  color: #fff;
  text-shadow: 2px 2px 3px #000000;
}

.panel-group .panel-heading a:active,
.panel-group .panel-heading a:visited,
.panel-group .panel-heading a:focus {
  text-decoration: none !important;
}

.panel-group .panel-collapse {
  background-color: #DDDDDD;
}

.panel-group .panel-body {
  padding-top: 20px;
  padding-bottom: 30px;
  text-align: center;
}

.panel-group > .panel {
  margin-top: 5px;
}

Answer 1

只需将clear:both添加到您的.panel-group课程，它就可以在IE

中使用

Internet Explorer中的Bootstrap Accordion与其他浏览器的功能不同

1 个答案: