Firefox中与Chrome / Safari不同的内联元素的CSS outline属性。 JavaScript解决方案？

Question

我正在尝试在多行display:inline文本周围画一条线，有点像将笔触设置为创建的DOM矩形的并集。

看起来像CSS outline一样，但是在浏览器中的行为却不一致。

使用Chrome / Safari和Firefox查看以下代码：

body { 
  font-family: sans-serif; 
  font-size: 24px;
  margin: 50px;
}
section {
  width: 200px;
}
h2 {
  font-weight: normal;
  display:inline;
  outline: 2px solid red;
  outline-offset: 10px;
  background:yellow;
}

<section>
  <h2>Some random text here and there</h2>
</section>

FF只是与其他浏览器的绘制方式不同。有没有办法使这项工作跨浏览器？

In Safari/Chrome

In FF

如果没有，是否可以使用JS，SVG或or或...的组合来达到相同的效果。