柔性垂直/水平中心对齐并非真正垂直居中

Question

我使用弹性框垂直和水平对齐一段文字（实际上是一个字母）。 HTML看起来像这样：

<div class="initial">M</div>

，CSS为：

.initial {
    background-color: #fff200;
    color: #ed1c24;
    height: 30px;
    width: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    font-size: 16pt;
    font-weight: bold;
    text-transform: uppercase;
}

我希望这完全以圆圈内的字母 M 为中心。相反，它已经轻微地移动到容器的顶部 - 请参见此屏幕截图：

添加line-height: 30px没有任何区别。我可以通过设置line-height: 34px来正确地将它垂直居中 - 但那是错的;这个修复程序在firefox中显示，但在chrome中断。文本真的应该是中心对齐的！

在Firefox中，问题比在chrome中更明显。这是jsfiddle of it。

有没有办法让文字居中而没有线高的额外像素？

编辑：我很欣赏有些人无法复制这个问题。我也意识到我错过了我的小提琴中的字体 - 字体是在文档上设置的。使用的字体是font-family: Helvetica,Arial,sans-serif。我在Mac（El Capitan）和Linux（Mint 17.3）上的firefox中都看到了这个问题。我没有Windows机器可以检查。最大的问题是不一致。