CSS过渡弄乱了Excel加载项上的Bootstrap列表组样式

Question

我正在开发Excel任务窗格加载项。我有要插入到Excel工作表中的内容列表，按节分隔。一切都按预期进行，直到我决定隐藏每个节中的选项，然后通过单击节标题并添加过渡效果使它们可折叠。

在Chrome和Edge上使用Office 365 Online，一切按预期进行。不幸的是，在桌面版Excel（Office 2019版本1808，使用IE11作为外接程序的Web查看器）上，它弄乱了列表组样式：它似乎保持页面的背景色，直到您将鼠标悬停在会达到预期的行为。

HTML

    <div class="list-container" *ngIf="accountingLists && accountingLists.length">

        <div class='list-header' (click)="accCollapsed = !accCollapsed">
            <i class="ms-Icon ms-Icon--ChevronDownMed" aria-hidden="true" [ngClass]="{ 'active': accCollapsed }"></i>
            &nbsp; <b>Accounting</b>
        </div>

        <div class="box list-group mt-0" [class.active]="accCollapsed">
            <a [routerLink]="[list.url]" *ngFor="let list of accountingLists"
                        class="list-group-item list-group-item-action">{{ list.label }}
            </a>
        </div>
    </div>

CSS

.list-header {
  cursor: pointer;
}

.list-header b {
  font-size: 1.05em;
}

.list-header i {
  font-size: .85em;
  color: rgb(77,101,214);
  transition: all 0.3s;
}

.list-header i.active {
  transition: all 0.35s;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

.box {
  max-height: 0px;
  overflow-y: hidden;
  transition: ease-in 0.3s max-height;
}

.box.active {
  max-height: 400px;
  transition: ease-out 0.35s max-height;
}

在Chrome上，折叠后可以正确显示：

直接在Excel（IE11）上搞砸了：

渗入列表的背景数量似乎是随机的。

用鼠标悬停列表后，它会恢复正常状态，就像在Chrome中看到的那样。