Css Firefox未正确设置SVG的父div的宽度

发布于06月29日

我有一个没有固定宽度和高度的SVG，它只定义了Viewbox.我有一个弹性容器，里面装着一些子元素的div，里面是svg的.使用Chrome，这很好用，svg是并排放在一起的.但在Firefox中，这些子div的宽度为0px，并且所有的SVG都放在彼此的上面.我如何才能让这些div/svg在Firefox中以与Chrome相同的方式运行？

我try 了在Java脚本中设置div宽度的解决方案，但我更喜欢仅使用css的解决方案.

<div class="container">
  <div class="first">
    <svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="50" />
    </svg>
  </div>
  <div class="second">
    <svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="50" />
    </svg>
  </div>
</div>

.container {
  display: flex;
  height: 50px;
}

.first {
  background: green;
}

.second {
  background: yellow;
}

svg {
  width: auto;
  height: 100%;
}

推荐答案

您还必须将width: auto和height: 100%添加到父div:

.container {
  display: flex;
  height: 50px;
}

.first {
  background: green;
}

.second {
  background: yellow;
}

svg, .first, .second {
  width: auto;
  height: 100%;
}

<div class="container">
  <div class="first">
    <svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="50" />
    </svg>
  </div>
  <div class="second">
    <svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="50" />
    </svg>
  </div>
</div>

或者，您可以将SVG直接放入主容器中

.container {
  display: flex;
  height: 50px;
}

.first {
  background: green;
}

.second {
  background: yellow;
}

svg {
  width: auto;
  height: 100%;
}

<div class="container">
  <svg viewBox="0 0 100 100" class="first">
    <circle cx="50" cy="50" r="50" />
  </svg>
  <svg viewBox="0 0 100 100" class="second">
    <circle cx="50" cy="50" r="50" />
  </svg>
</div>