浏览器显示CSS汉堡图标有三个不同高度的条形图

Question

我试图仅使用CSS来实现汉堡图标菜单。 我的实现如下。我把这三个span标签放在HTML文档中。

＆＃13;

＆＃13;

.sidebar-toggle {
  display: inline-block;
}

.sidebar-toggle span {
  display: block;
  width: 1.5rem;
  height: 0.2rem;
  border-radius: 0.3rem;
  background-color: rgb(196, 196, 196);
  margin-top: 0.2rem;
}

＆＃13;

<div class="container">
  <div class="sidebar-toggle">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

然而，浏览器（Chrome和IE）显示三个条形（跨度标签）具有不同的高度和边距，如下图所示。

我给它一个不同的高度和边距值更大，然后它显示正确的答案。所以我仔细猜测浏览器的分辨率导致了这个问题。

或者这个CSS汉堡图标实现有什么问题吗？

Answer 1

有更好的技术可以实现，我建议使用框阴影：

.box-shadow-menu:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1em;
  height: 0.15em;
  background: black;
  box-shadow: 
    0 0.25em 0 0 black,
    0 0.5em 0 0 black;
}

<div class='box-shadow-menu'></div>