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

Question

在我的网站上，我在菜单中使用 bootstrap 手风琴。我能够在 google chrome 中按照需要进行制作，但在 safari 和我的 iPhone 中，它向我显示了错误的颜色和样式。这是一个已知的错误还是我只是做错了什么？（网站：http://ketyi.com） chrome:

野生动物园：

这里是 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

您已将 link 定义为 type="button"，这是不应该的。这就是导致问题的原因。

变化：

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

对此：

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

Answer 2

为锚标记添加样式-webkit-appearance: none;

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

Bootstrap accordian different background color on safari

css

safari

cross-browser

mobile-safari

bootstrap-4