如何标准化浏览器之间不一致的文本垂直对齐方式？

Question

下面的文本在容器内垂直居中显示。

问题在于，文本的垂直对齐在各个平台/浏览器之间不一致。在macOS的Firefox，Android的Chrome和Windows的Chrome上，文本如下所示：

注意文本如何稍微靠近蓝色容器的顶部边缘。

我尝试使用vertical-align: middle或height / line-height的不同组合进行各种修复均无济于事。

以下是代码（jsfiddle）：

html：

<h1 class="title">
  This is a title
</h1>

css：

.title {
  display: inline;
  padding: 5px;
  color: white;
  background-color: blue;
}