Проблема с svg и встроенным блоком на Firefox

Question

Как предложено @Robert Longson Я переписываю оригинальный вопрос. У меня есть 3 встроенных svgs с bottom-padding взломать контейнеры. Я хочу, чтобы эти поля были встроенными, поэтому в css я добавил inline-block, и я хочу иметь ширину, не превышающую некоторого значения, поэтому в том же контейнере я добавил атрибут max-width.

Все в порядке, за исключением Firefox, где большая коробка не отображается, а два небольших ящика намного меньше по сравнению с Chrome. Теперь, когда @Rahul предложил, я использовал width вместо max-width, и он исправил проблему. Похож на ошибку в Firefox с svg.

Ссылка на код: 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; 
} 

Answer 1

ли это в вашем 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 */ 
} 

Примечание:

1. display: -moz-inline-stack; Это свойство недействительным.

2. max-width: 3em; max-width: 6em; max-width: 9em;Firefox не будет оказывать max-width и inline-block в одном элементе.