css - Bootstrap Accordion 在 safari 上的不同背景颜色

Question

在我的网站上，我在菜单中使用了 bootstrap accordian。我能够在 google chrome 中按需制作它，但在 safari 和我的 iPhone 中，它向我显示了错误的颜色和样式。这是一个已知的错误还是我只是做错了什么？ (网站:http://ketyi.com) Chrome :

Safari :

这是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" ...