Mozilla Firefox未正確顯示css，雖然已添加-moz-

display: inline-block;已添加到代碼中，並確保IE和Firefox正確顯示它以及-moz-inline-stack;和*display: inline;也已添加。Mozilla Firefox未正確顯示css，雖然已添加-moz-

儘管採取了這些措施，firefox並不願意正確顯示元素。

這是預期顯示：

How the element looks like correctly

這是如何Firefox是顯示它：

How firefox is displaying it


 
#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>

有沒有人知道這個解決方案？

來源

2017-09-04 warum7

您的代碼段在Firefox中適用於我，因此它可能是您沒有顯示的代碼中的其他內容？ – FluffyKitten

我也在Firefox中看到正確的顯示。值得注意的是，大部分-moz和-webkit規則都是不必要的;例如，標準的「邊界半徑」規則多年來都得到了全面的支持。 Firefox也支持'inline-block'，並且由於css順序，規則將最終覆蓋（afaik過時的）'-moz-inline-stack'規則。您可能會考慮通過並刪除那些不再需要的特定於供應商的規則（或者更好地刪除它們中的所有*，並使用css autoprefixer來填寫構建時實際仍然需要的任何內容） –

Hi FluffyKitten，Hi丹尼爾，謝謝你的回覆。奇怪的是，它確實在我的Firefox和我的朋友之一上顯示不正確。謝謝丹尼爾，我將刪除border-radius特定的標籤，因爲它們實際上不再需要（這是舊代碼）。 – warum7

把-moz-inline-stack低於上面沒有其他：

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

上一般的瀏覽器display: inline-block;將默認工作，display: -moz-inline-stack;不會因爲他們沒有認識到這一點。雖然在Firefox中，它會。

請記住：始終應用最後出現的樣式。

ALSO：我不明白爲什麼使用-moz-inline-stack作爲display: inline-block適用於所有人。

希望有幫助。

來源

2017-09-04 00:06:37 masterpreenz

感謝masterpreenz我在正確的「方式」上添加了與其他代碼下面的-moz相關的代碼，但它仍然無法正確顯示。我不得不將-moz-inline-stack更改爲moz-inline-box，它工作。

我其實不明白爲什麼在我的情況下firefox沒有正確顯示display: inline-block;，但嘿如果-moz-inline-box;做的工作，我很好。

來源

2017-09-04 00:46:36 warum7

Mozilla Firefox未正確顯示css，雖然已添加-moz-

回答

相關問題