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和内嵌块显示问题

回答

相关问题