Firefox上的svg和內嵌塊顯示問題

正如@Robert Longson所建議的，我重寫了原始問題。我有3個內聯svgs，容器中有bottom-padding黑客。我想這個盒子是內聯的，所以在CSS中，我添加了inline-block，並且我希望寬度不超過某個值，因此我在同一個容器中添加了max-width屬性。Firefox上的svg和內嵌塊顯示問題

除Firefox之外，所有的都很好，沒有顯示大框，兩個小框比Chrome小得多。現在@Rahul建議我用width而不是max-width，它解決了這個問題。看起來像使用svg的Firefox中的錯誤。

鏈接代碼：https://jsfiddle.net/mikeNIN/2yjob68o/和代碼： HTML：

<div class='container_main' onclick=''> 
    <div class='main' id='main-info'> 
    <div id='weather-icon'> 
     <div class="svg_container"> 
     <svg width="100%" style="padding-bottom: 64%; height: 1px; overflow: visible" viewBox="0 0 64 41" preserveAspectRatio="xMidYMin slice" version="1.1"><g transform="translate(0,-1011.3622)"><rect width="63.8" height="40.8" x="0.1" y="1011.5" style="fill:#a662bd;stroke-linecap:round;stroke-width:0.2;stroke:#000"/></g></svg> 
     </div> 
    </div> 
    </div> 
    <div class='enh' id='enhanced-info'> 
    <div class='svg_container_small'> 
     <svg width="100%" style="padding-bottom: 100%; height: 1px; overflow: visible" viewBox="0 0 16 16" preserveAspectRatio="xMidYMin slice" version="1.1"><g transform="translate(0,-1036.741)"><rect width="15.9" height="15.9" x="0" y="1036.8" style="fill:#35c062;stroke-linecap:round;stroke-width:0.1;stroke:#000"/></g></svg> 
     <span>small1</span> 
    </div> 
    <div class='svg_container_small'> 
     <svg width="100%" style="padding-bottom: 69%; height: 1px; overflow: visible" viewBox="0 0 16 11" preserveAspectRatio="xMidYMin slice" version="1.1"><g transform="translate(0,-1041.3622)"><rect width="15.9" height="10.9" x="0" y="1041.4" style="fill:#4114bd;stroke-linecap:round;stroke-width:0.1;stroke:#000"/></g></svg> 
     <span>small2</span> 
    </div> 
    </div> 
</div>

CSS：

html { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
-ms-box-sizing: border-box; 
box-sizing: border-box; 
} 
.main { 
text-align: center; 
} 
.container_main { 
min-height: 100vh; 
display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -webkit-flex; 
display: flex; 
flex-direction: column; 
} 
.svg_container { 
max-width: 12em; 
display: inline-block; 
vertical-align: top; 
margin-top: 10px; 
margin-bottom: 10px; 
} 
.enh { 
text-align:center; 
} 
.svg_container_small { 
max-width: 6em; 
display: inline-block; 
vertical-align: top; 
margin: 10px; 
}

來源

2017-02-20 mikeNIN

我們需要一個強調最小的[mcve]。此刻，我們正在大海撈針，不知道你是如何構建大海撈針的。 –

我會嘗試重寫問題，但我不知道問題的根源是什麼：（ – mikeNIN

源代碼問題是您的'scss'從演示中刪除了'@ mixin'並且使用不帶@mixin – Rahul

在你的CSS執行此操作。

.svg_container{ 
    display: block; /* No inline-block */ 
    margin-left: auto; 
    margin-right: auto; 
}

我發現你的問題。只需按照此代碼。

.svg_container{ 
    display: inline-block; 
    width: 9em; /* Use width instead of max-width */ 
}

注：

display: -moz-inline-stack;這是無效的屬性。
max-width: 3em; max-width: 6em; max-width: 9em;火狐不會在同一個元素渲染max-width和inline-block。

來源

2017-02-20 13:47:48 Rahul

我想我嘗試過，我使用了內聯塊，因爲API可以返回值列表，例如結果會給我們兩個圖標，一個用於霧和另一個用於下雨，帶顯示：阻止它會在列中顯示圖標，但糾正我，如果我錯了 – mikeNIN

我編輯答案你的問題是解決的 – Rahul

是的，它確實解決了這個問題，但我不知道爲什麼，因爲我發現關於這一點，FF不會呈現'max-width'和'inline-block'。你能告訴我這個信息的來源嗎？並且非常感謝！ – mikeNIN

Firefox上的svg和內嵌塊顯示問題

回答

相關問題