Firefox上的svg和内联块显示问题

Question

根据@Robert Longson的建议，我正在重写原始问题。 我有3个内嵌svgs，容器中有bottom-padding hack。我希望这个框是内联的，所以在css中我添加了inline-block并且我希望宽度不超过某个值，所以在同一个容器中我添加了max-width属性。

一切都很好，除了Firefox，没有显示大盒子，而且与Chrome相比，两个小盒子要小得多。 现在@Rahul建议我使用width而不是max-width来解决问题。用svg看起来像Firefox中的bug。

链接到代码：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。