Chrome移动版中的垂直菜单图标

Question

我有一个菜单图标，在所有浏览器中完全垂直居中，但在Chrome浏览器中没有。这是菜单图标的代码：

-HTML -

<div class="menuIcon">
  <p class="im im-menu"></p>
</div>

-CSS -

.menuIcon{
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    margin-left: auto;
    padding: 2px 6px;
    color: #424242;
    transition: background-color 0.8s ease 0s;
}   
.menuIcon:hover{
    background-color: #ddd;
}
.im {
  display: inline-block;
  font: normal normal normal 24px/1 'iconmonstr-iconic-font';
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

我尝试使用line-height: 24px和其他属性，但没有结果。 padding: 6px 2px 2px或多或少在Chrome for Mobile中居中，但在桌面浏览器中格式不正确，因此无法选择。如果有人也能解释我这种行为，我将非常感激。

这是我网站的link。请注意，问题仅出在Chrome for Mobile中。

我上传了问题的截图。