Mozilla FirefoxはCSSに正しく表示されていませんが、-moz-が追加されましたが、

Question

display: inline-block;がコードに追加され、IEとFirefoxが正しく表示されることを保証するためにも同様に-moz-inline-stack;と*display: inline;が追加されました。

これらの手順は行われましたが、Firefoxは要素を正しく表示するつもりはありません。

これは意図したディスプレイであり、これは、Firefoxはそれを表示している方法です

：

 
#currencies { 
 
    display: -moz-inline-stack; 
 
    display: inline-block; 
 
    zoom: 1; 
 
    *display: inline; 
 
    color: black; 
 
    font-size: 0; /* to eliminate space between buttons */ 
 
    line-height: 1.5; 
 
    cursor: pointer; 
 
} 
 

 
#currencies span { 
 
    display: -moz-inline-stack; 
 
    display: inline-block; 
 
    zoom: 1; 
 
    *display: inline; 
 
    padding: 1.5px 5px; 
 
    border: 1px solid black; 
 
    background: none #F6F6F6; 
 
    font-size: 12px; 
 
    background-color: transparent; 
 
    font: Montserrat; 
 
    letter-spacing: 2px; 
 
    vertical-align: 2px; 
 
} 
 

 
#currencies .left { 
 
    -webkit-border-top-left-radius: 4px; 
 
    -webkit-border-bottom-left-radius: 4px; 
 
    -moz-border-radius-topleft: 4px; 
 
    -moz-border-radius-bottomleft: 4px; 
 
    border-top-left-radius: 4px; 
 
    border-bottom-left-radius: 4px; 
 
    border-right: none; 
 
} 
 

 
#currencies .right { 
 
    -moz-vertical-alignment: top; 
 
    -webkit-border-top-right-radius: 4px; 
 
    -webkit-border-bottom-right-radius: 4px; 
 
    -moz-border-radius-topright: 4px; 
 
    -moz-border-radius-bottomright: 4px; 
 
    border-top-right-radius: 4px; 
 
    border-bottom-right-radius: 4px; 
 
    border-left: none; 
 
} 
 

 
#currencies .selected { 
 
    font-weight: normal; 
 
    color: white; 
 
    background: black; 
 
    zoom: 1; 
 
}

<span id="currencies"> 
 
    <span data-currency="USD" class="selected left">USD</span> 
 
    <span data-currency="EUR" class="middle">EUR</span> 
 
    <span data-currency="CHF" class="right">CHF</span> 
 
</span>

誰にでもこの解決策はありますか？

Answer 1

はない、他の上記の下-moz-inline-stackを置く：display: inline-block;はデフォルトで動作し、display: -moz-inline-stack;は、彼らがこれを認識していないではないだろうとして、一般的なブラウザで

display: inline-block; 
display: -moz-inline-stack; 

を。ファイアーフォックスでもそれは起こりますが。

覚えておいてください：最後に来るスタイルは常に適用されます。

また、-moz-inline-stackをdisplay: inline-blockとして使用する理由がわかりません。

希望するものがあります。

Answer 2

masterpreenzのおかげで私は正しい "道"を得ました。他のコードの下に-moz-関連コードを追加しましたが、まだ正しく表示されていませんでした。私は-moz-inline-stackをmoz-inline-boxに変更しなければなりませんでした。

実際に私の場合firefoxはdisplay: inline-block;と正しく表示されませんでしたが、なぜね、-moz-inline-box;の仕事をしているのか分かりません。