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

Question

在我的网站上，我在菜单中使用Bootstrap Accordian。我能够在google chrome中按需制作，但在野生动物园和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" ...

Answer 2

向锚标签-webkit-appearance: none;添加样式