テキストの周りに背景がありますが、行間に空白がありますか？

Question

私は背景色を持つテキストを取得しようとしていますが、行間に空白があります。私はそれが主にFirefoxとエクスプローラで動作するように管理しましたが、SafariとChromeでは行間にスペースがありません。

しかし、ここではそれがChromeでどのように見えるかです：：ここではそれは

Firefoxでどのように見えるのです

それはFirefoxとIEで動作させるために、私は追加する必要がありましたH2タグ内のテキストの周りのスパン、そのスパンに背景を適用し、その内側に2番目のスパンを追加します。これはテキストをドロップしてバックグラウンド内で垂直方向にセンタリングすることができますオント色。

HTML：

<h2><span class="h2inner"><span class="h2inner2">Conflict of Interest Policy of A Better City, Inc.</span></span></h2> 

はCSS：

.h2inner { 
padding: 4px 0 3px 0; 
background-color: $h2color; } 
.h2inner2 { 
position: relative; 
top:5px;} 

は、理想的には、私は色の各ラインのブロックの最初と最後にパディングをもたいが、私は唯一のパディングを取得することができます頭の全体の始まりと終わり。途中ではなく、新しい行に壊れます。

アイデア？

Answer 1

あなたは、行間隔のためline-heightを調整することができ、各ライン上の左右のパディングのためにあなたはleft位置

h2 { 
 
    width: 400px; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    color: white; 
 
    line-height: 1.3em; 
 
} 
 
span { 
 
    background-color: #F07317; 
 
    white-space: pre-wrap; 
 
    padding-right: 10px; 
 
} 
 
span span { 
 
    position: relative; 
 
    left: 10px; 
 
}

<h2><span><span>Conflict of Interest Policy of A Better City, Inc.</span></span></h2>

で white-space: pre-wrapと一つの内側スパンを使用することができます