インラインブロック属性とスパンを他のスパンとどのように揃えるには？

Question

スパンの1つにインラインブロック属性を設定して、その幅を設定する必要があります。しかしその後、私はそれがFirefoxの他の「インライン」スパンと一致しないことを発見します。しかし、IE上でうまく動作します。次のHTMLスナップを参照してください

<span class="" style="font-family: Times New Roman; font-size: 22pt; background-color: rgb(229, 102, 0);">123123</span><span class="qqeditor-display-tab" style="display:inline-block;font-family: Times New Roman; font-size: 22pt; width: 22px; background-color: rgb(229, 102, 0); height: 33px;">aaa</span><span style="font-family: Times New Roman; font-size: 22pt; background-color: rgb(229, 102, 0);">123</span> 

私はこの3つのスパンをFirefox上で整列させる方法はありますか？ありがとう！

Answer 1

inline-block;の設定は、特に動作します。cross-browserは受け入れられません。

Demo

Answer 2

これは実際にline-height問題のように聞こえます。それらの要素のline-heightをnormalに設定することは、このトリックを行うべきです。

line-heightがinline-block要素上line-heightがを行いながらinline要素のline-heightは、（あなたがする背景を適用しているものである）テキストの高さに影響を与えていないため、バックグラウンドがある影響を与える理由要素の高さに影響します。これがどのように機能するかについて詳しく説明することができますが、その例がいくつあるか分かりますので、代わりに例を示します。

Example of how line-height affects background and border/outline

ソース、ケースにjsFiddleはHTML

消え

<p class="a">normal <span class="inline">A</span><span class="inline-block">B</span></p> 
<p class="b">2em <span class="inline">A</span><span class="inline-block">B</span></p> 
<p class="c">.5em <span class="inline">A</span><span class="inline-block">B</span></p> 

CSS

.a span { 
    line-height:normal; 
} 
.b span { 
    line-height:2em; 
} 
.c span { 
    line-height:10px; 
} 
.inline-block { 
    display:inline-block; 
} 

span { 
    font-size:2em; 
    outline:1px solid red; 
    background:lime; 
} 
p { 
    margin:2em; 
    outline:1px solid green; 
}