Safari 上的 Bootstrap 手风琴不同的背景颜色

Question

在我的网站上，我在菜单中使用引导手风琴。我能够在谷歌浏览器中按需要制作它，但是在 safari 和我的 iPhone 上，它向我显示了错误的颜色和样式。这是一个已知的错误还是我做错了什么？（网站：http : //ketyi.com）铬：

苹果浏览器：

这是CSS：

     <div class="card">
        <div class="heading" role="tab">
            <a class="collapsed" type="button" data-toggle="collapse" data-target="#collapse-{{ mainCategory.name }}"
               aria-expanded="{% if (categoryParentId is not null) and (categoryParentId == mainCategory.id) %}true{% else %}false{% endif %}" aria-controls="collapse-{{ mainCategory.name }}">
                {{ mainCategory.name }}
            </a>
        </div>
        <div id="collapse-{{ mainCategory.name }}" class="collapse {% if categoryParentId == mainCategory.id %}show{% endif %}" aria-labelledby="{{ mainCategory.name }}" data-parent="#categories">
            {% for category in mainCategory.children %}
                <div class="card-body">
                    <a {% if categorySlug == category.slug %}class="active"{% endif %} href="{{ path('category_show', {'categorySlug': category.slug}) }}">
                        {{ category.name }}
                    </a>
                </div>
            {% endfor %}
        </div>
    </div>
    <hr/>

  .mobile-navigation { padding: 3rem;
    a { color: #fff; width: 100%;
      &:before {font-family: 'Glyphicons Halflings';content: "\e080";float: right;transition: all 0.5s;}
      &:hover { text-shadow: none; }
    }
    .card { background-color: unset; border: none; }
    hr { width: 100%; top: 0; }
    .heading {
      a:before {font-family: 'Glyphicons Halflings';content: "\e114";float: right;transition: all 0.5s;}
      &.active {
        a:before {-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);transform: rotate(180deg);}
      }
    }
  }

感谢您提供的任何帮助。

Answer 1

您已经定义了type="button"不应该的链接。这就是导致问题的原因。

改变：

<a class="collapsed" type="button" data-toggle="collapse" ...

对此：

<a class="collapsed" data-toggle="collapse" ...