带显示的按钮:flex在Safari中不起作用.导致尺寸和对齐问题

Question

我在显示方面遇到了一些问题:在Safari和iOS Safari中都有flex.Safari存在对齐问题,iOS Safari具有对齐和大小问题.这是Safari中的预期或有效错误吗？

编辑:此外,按钮内的子SVG的高度百分比也不起作用.这适用于所有其他浏览器.我用另一个更高级的SVG元素示例,我添加了一个锚点来与按钮进行比较.这里有更高级的例子

我的简单例子

HTML:
<div class="flex">
  <div class="col col-1">
    <button class="sub-col">
      <span class="span"></span>
    </button>
    <div class="sub-col">2</div>
    <div class="sub-col">3</div>
  </div>
  <div class="col col-2"></div>
  <div class="col col-3"></div>
</div>


CSS:
.flex {
  display: flex;
  flex-direction: column;
  height: 80vh;
  background: #666666;
  position: fixed;
  width: 100%;
}

.col {
  display: inherit;
  flex: 1 1 auto;
  background: #ccffcc;
}
.col-1 {
  flex: 0 0 10vh;
  background: #ffcccc;
}
.col-3 {
  flex: 0 0 10vh;
  background: #ccccff;
}

.sub-col {
  display: inherit;
  flex: 0 0 25%;
  justify-content: center;
  align-items: center;
}

.span {
  width: 10px;
  height: 10px;
  background: #ffaaaa;
}

截图:

它应该是什么样子,并且在Chrome,FF和Edge中有用(没有测试IE)

这就是它在Safari中的样子

这是iOS Safari

Answer 1

您无法将display flex设置为button和fieldset元素.chk以下链接.用div或span标签包裹你的元素

https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers

Answer 2

对于这个问题,button元素和其他几个元素在某些浏览器中不能是flex容器.Safari就是其中之一.

如果你愿意,你可以尝试一个简单的解决方案.这个想法是,你将.span包装在.span-wrapper中.然后你让.span-wrapper成为你的flex容器.

像那样:

HTML:

<div class="flex">
  <div class="col col-1">
    <button class="sub-col">
      <span class="span-wrapper">
        <span class="span"></span>
      </span>
    </button>
    <div class="sub-col">2</div>
    <div class="sub-col">3</div>
  </div>
  <div class="col col-2"></div>
  <div class="col col-3"></div>
</div>

CSS:

.flex {
  display: flex;
  flex-direction: column;
  height: 80vh;
  background: #666666;
  position: fixed;
  width: 100%;
}

.col {
  display: inherit;
  flex: 1 1 auto;
  background: #ccffcc;
}
.col-1 {
  flex: 0 0 10vh;
  background: #ffcccc;
}
.col-3 {
  flex: 0 0 10vh;
  background: #ccccff;
}

.sub-col {
  display: inherit;
  flex: 0 0 25%;
  justify-content: center;
  align-items: center;
}

.span {
  width: 10px;
  height: 10px;
  background: #ffaaaa;
}

.span-wrapper {
  display: flex;
  flex-basis: 100%;
  justify-content: center;
  align-items: center;
}