为啥 flexbox 代码在 Safari 5 和 6 中不起作用？

Posted 2023-03-06

技术标签:

【中文标题】为啥 flexbox 代码在 Safari 5 和 6 中不起作用？【英文标题】：Why is flexbox code not working in Safari 5 and 6?为什么 flexbox 代码在 Safari 5 和 6 中不起作用？ 【发布时间】：2016-11-09 09:59:42 【问题描述】：

我使用 flexbox 和 autoprefixer 来对齐 this website 上的很多内容。

现在，尽管我使用了自动前缀，我的客户还是给我发送了以下其中一个部分的屏幕截图：

如您所见，图像未在圆心对齐。并非所有最近的浏览器都是这种情况，包括 IE 10+。

根据我在访问多个 SO 线程后收集到的信息，即使 Safari 5+ 也支持带前缀的 flex。所以我不知道为什么我的弹性代码不起作用。

html：

<figure class="focus-point" data-animation="fadeInUp" data-animation-delay="0.2">
    <a href="">
        <img src="images/focus-feature-points/2.jpg" >
    </a>
    <figcaption>
        <h3>Engaging Educational Games</h3>
    </figcaption>
</figure>

<a> 标签的 CSS 如下：

.focus-point > a 
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    border: 3px solid;
    display: inline-block;
    height: 260px;
    width: 260px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    -webkit-transition: all .3s;
    transition: all .3s;

我的客户端使用的 Safari 版本是 5.1.10。

为什么尽管我使用了前缀代码，但我的 flexbox 代码仍然不起作用？

我也知道一些高级 flexbox 属性可能在部分支持 flexbox 的旧浏览器中存在问题（例如flex-wrap），但正如您所见，在我的这个示例中我只使用了最基本的 flexbox 属性.

我做错了什么？

【问题讨论】：

【参考方案1】：

Safari 6.1 之前的版本支持previous version of the flexbox specification (source)。

对于 Safari 5.0、5.1 和 6.0，除了display: -webkit-box（即当时的display: flex），您还需要使用-webkit-box-orient 属性。

这告诉 flex 容器如何对齐它的子容器。

初始值为inline-axis。尝试使用vertical 或horizontal。

这是规范中包含详细信息的部分： https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#orientation

更多细节在这里：Flexbox code working on all browsers except Safari. Why?