0

菜单“汉堡包”图标在 Android 的标准浏览器中不可见（在三星 S5 和三星 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;
}
}

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

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

4

1 回答 1

0

经过搜索，阅读，等待，我终于找到了自己问题的答案。如果 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 代码））。

你有它。适用于所有浏览器。问题解决了。

并认为这段代码来自谷歌发起的课程。具有讽刺意味的是，他们自己的设计在他们自己的 Android 浏览器中无法正常运行。

于 2015-10-03T10:09:02.800 回答