菜单图标在 Chrome 中可见，但在 Android 的标准浏览器中不可见

Question

菜单 "hamburger" 图标在 Android 的标准浏览器中不可见（已在 Samsung S5 和 Samsung Note 2 上测试）。但它确实出现在 Chrome 中并且一切正常。

使用 svg 图标。

<header class="header">
  <div class="header__inner">
    <img class="header__logo" src="images/city.png" alt="iconic view of a cityscape">
    <h1 class="header__title">
      The Brighton Times
    </h1>
    <a id="menu" class="header__menu">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"/>
      </svg>
    </a>
  </div>
</header>

<nav id="drawer" class="nav">
  <ul class="nav__list">
    <li class="nav__item"><a href="#">News</a></li>
    <li class="nav__item"><a href="#">Events</a></li>
    <li class="nav__item"><a href="#">Culture</a></li>
    <li class="nav__item"><a href="#">Blog</a></li>
  </ul>
</nav>

以及 responsive.css 中的代码下方。

@media screen and (max-width: 549px) {
.header__logo {height: 48px;
margin-right: 0.5em;
}
.header__title {
margin-left: 0;
font-size: 2em;
vertical-align: bottom; 
}
.nav {
z-index: 10;
background-color: #fff;
width: 300px;
position: absolute;
/* This trasform moves the drawer off canvas. */
-webkit-transform: translate(-300px, 0);
transform: translate(-300px, 0);
/* Optionally, we animate the drawer. */
transition: transform 0.3s ease;
}
.nav.open {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.nav__item {
display: list-item;
border-bottom: 1px solid #E0E0E0;
width: 100%;
text-align: left;
}
.header__menu {
display: inline-block;
position: absolute;
right: 0;
padding: 1em;
}
.header__menu svg {
width: 32px;
fill: #000000;
}
}

哦，之前我忘记了标准浏览器中的整个右侧是 clickable/tappable。所以无论你点击哪里（只要它在屏幕的右侧），菜单（抽屉）都会出现。

我似乎无法解决这个问题。

Answer 1

经过搜索、阅读、等待，我终于找到了自己问题的答案。如果 png 是更好的选择，谁愿意使用 svg 图标？解决方案：

而不是

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"/>
  </svg>

只需使用

<img src="/images/icon.png" height="32" width="32">

对于像我这样的菜鸟。您可以从 iconfinder.com 下载一个汉堡包图标，将其另存为 png（提示：至少 128px 并将其缩小（参见 img src 代码））。

好了。适用于所有浏览器。问题已解决。

并认为此代码来自 Google 发起的课程。这很讽刺，因为他们自己的设计在他们自己的 Android 的浏览器中不能很好地工作。

菜单图标在 Chrome 中可见，但在 Android 的标准浏览器中不可见

Menu icon visible in Chrome but not in Android's standard browser

css

svg

menu

hamburger-menu