Question

我正在尝试创建一个简单的方向键，我在尝试使用flexbox分隔左右按钮时遇到了问题。按钮组件本身就是SVG。使用display: flex会在SVG的顶部和底部引入我不想要的空白区域。奇怪的是，如果我让他们成为div，问题就不存在了。这只发生在Chrome上，适用于Firefox。

以下是有问题的代码：https://jsfiddle.net/j1etr0ph/

以下是我想要的解决方案，但使用SVG：https://jsfiddle.net/j1etr0ph/1/

更奇怪的是，它似乎在Stack Overflow的代码沙箱中工作。

＆＃13;

#container {
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
}

#directional {
  width: 33.3%
}

＆＃13;

<div id="container">
  <svg id="directional" viewBox="0 0 30 30">
    <g id="circle">
      <path id="fill" fill="#D1D3D4" d="M15,29.5C7,29.5,0.5,23,0.5,15S7,0.5,15,0.5S29.5,7,29.5,15S23,29.5,15,29.5z"/>
      <path id="outline" fill="#414042" d="M15,1c7.7,0,14,6.3,14,14s-6.3,14-14,14S1,22.7,1,15S7.3,1,15,1 M15,0C6.7,0,0,6.7,0,15
        s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0L15,0z"/>
    </g>
    <polygon id="arrow" fill="#414042" points="6.3,20 15,5 23.7,20 	"/>
  </svg>
  <svg id="directional" viewBox="0 0 30 30">
    <g id="circle">
      <path id="fill" fill="#D1D3D4" d="M15,29.5C7,29.5,0.5,23,0.5,15S7,0.5,15,0.5S29.5,7,29.5,15S23,29.5,15,29.5z"/>
      <path id="outline" fill="#414042" d="M15,1c7.7,0,14,6.3,14,14s-6.3,14-14,14S1,22.7,1,15S7.3,1,15,1 M15,0C6.7,0,0,6.7,0,15
        s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0L15,0z"/>
    </g>
    <polygon id="arrow" fill="#414042" points="6.3,20 15,5 23.7,20 	"/>
  </svg>
</div>

＆＃13;

有谁知道造成这种情况的原因以及如何摆脱它？

编辑：所以它似乎不完全可重复。 *在Windows上，Firefox中不存在该问题。在Chrome中，它仅存在于我的本地站点上，而不是JSFiddle或SO代码。 *在Mac上，我还没有测试过Firefox。在Chrome中，它存在于我的本地网站AND JSFiddle上，但不是SO。

编辑：Paul的解决方案是正确的，向SVG添加height: 100%解决了问题。因为它似乎只发生在我的本地网站上（仍然很好奇为什么），这里是带有和没有高度属性的屏幕截图：

使用height: 100%：https://i.stack.imgur.com/gResy.png
没有：https://i.stack.imgur.com/whnxU.png

Answer 1

尝试将height: 100%添加到SVG中。

#directional {
  width: 33.3%;
  height: 100%;
}

https://jsfiddle.net/j1etr0ph/2/

是什么导致Chrome中的flexbox中的这个空白区域，我该如何摆脱它？

1 个答案: