css - インライン要素のボックスシャドウ

Question

複数行のテキストが画像上に配置されています。テキストはテープのように白い背景に表示されます。テキストの各行には、左右に小さなパディングが必要です。これは、インライン テキストのボックス シャドウで実現できます。

div.slide {
    background-color: black;
    height:200px;
    width:600px;
}
div.show {
    position:absolute;
    top:50px;
    left:50px;
    color:black;
    width:200px;
}
h3 {
    color:black;
    background-color:white;
    display:inline;
    -moz-box-shadow: 5px 0px 0px white, -5px 0px 0px white;
    -webkit-box-shadow: 5px 0px 0px white, -5px 0px 0px white;
    box-shadow: 5px 0px 0px white, -5px 0px 0px white;
}

<div class="slide">
    <div class="show">
        <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
    </div>
</div>

残念ながら、firefox の結果は chrome の結果と同じではありません。しかし、Firefox の動作が正しくないとは言えません。しかし、どうすればFirefoxのクロムの結果を達成できますか?