带显示的按钮：flex 在 Safari 中不起作用。导致大小和对齐问题

Posted 2023-03-07

【中文标题】带显示的按钮：flex 在 Safari 中不起作用。导致大小和对齐问题

【英文标题】：Button with display: flex does not work in Safari. Causing size and alignment issues

【发布时间】：2017-11-02 05:17:19

【问题描述】：

我的 display: flex 在 Safari 和 ios Safari 中都有问题。 Safari 有对齐问题，iOS Safari 有对齐和大小问题。这是 Safari 中的预期错误还是有效错误？

编辑：此外，Button 内子 SVG 的高度百分比也不起作用。这适用于所有其他浏览器。 我使用 SVG 元素制作了另一个更高级的示例，并添加了一个锚点来与按钮进行比较。 More advanced example here

My simple example

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

【问题讨论】：

Flexbox not working on <button> element in some browsers的可能重复

【参考方案1】：

您不能将 display flex 设置为 button 和 fieldset 元素。 chk 下面的链接。用 div 或 span 标签包裹你的元素

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

【讨论】：

我明白了，当我浏览该页面时一定错过了。我已经改用a-tags了。不幸的是，还有更多的问题。也许使用 Flexbox 不是最好的主意。

您能描述一下这些问题吗？也许我能帮上忙。

【参考方案2】：

按钮元素和其他一些元素在某些浏览器中不能是弹性容器。 Safari 就是其中之一。

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

这样：

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;

【讨论】：

我最终改用超链接。所以现在我试图弄清楚为什么子 SVG 元素的高度/最大高度百分比在 Safari 中不起作用。前进 2 步，后退 1 步……