仅带Bootstrap的手机上奇怪的灰色按钮背景

Question

我的导航仪看起来像这样：

    <nav class="text-center">
      <button class="btn nav-button color-house" type="button"><%= link_to "House", home_house_path, class: "color-house" %></button>
      <button class="btn nav-button color-spouse" type="button"><%= link_to "Spouse", home_spouse_path, class: "color-spouse" %></button>
      <button class="btn nav-button color-kids" type="button"><%= link_to "Kids", home_kids_path, class: "color-kids" %></button>
      <button class="btn nav-button color-neutral" type="button"><%= link_to "Blog", blogs_path %></button>
    </nav>

在计算机上可以正常工作的情况：

但是由于某些奇怪的原因，移动设备上的背景有奇怪的灰色：

奇怪的是，如果我尝试使用chrome inspector的移动模拟器，它看起来就很好了……图像只在实际的手机上出现了不需要的灰色。

如果您想查看实际内容，则指向heroku网站的链接为here。

我觉得这一定是某种Bootstrap 4的东西，因为我从来没有在没有它的网站上经历过这种行为。

我在background-color: white !important和btn上尝试过nav-button，但无济于事。我目前拥有的唯一定制CSS是这样的：

$color-house: #84C99A;
$color-spouse: #313E50;
$color-kids: #EFB0A1;
$color-neutral: #B7AD99;
$color-black: #26010C;

.color-house { color: $color-house; }
.color-spouse { color: $color-spouse; }
.color-kids { color: $color-kids; }
.color-neutral { color: $color-neutral; }
.color-neutral-hover:hover { color: $color-black; }

.nav-button a {
  font-family: $font-script;
  display: inline-block;
  font-size: 30px;
  padding-top: 10px;
  margin: 10px 10px 20px 10px;
  border-top: solid thin white;
  border-top: solid thin white;
}

@media screen and (max-width: 800px) {
  .nav-button a {
    margin: 10px 5px 30px 5px;
    font-size: 25px;
  }
}

Answer 1

向.btn类添加背景透明属性

.btn {background: transparent;}