Flexbox CSS 不适用于 Safari

Posted 2023-03-05

【中文标题】Flexbox CSS 不适用于 Safari

【英文标题】：Flexbox CSS not working with Safari

【发布时间】：2016-02-18 17:40:54

【问题描述】：

我正在上课，它在所有浏览器上运行良好，但不适用于 Safari。

.video-js .vjs-progress-control 
    -moz-box-ordinal-group: 2;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    order: 1;
    transition: all 0.4s ease 0s;
    top: 0;

当我在 safari 中检查这个类时，我只能看到 top:0; 是 safari 中唯一可见的元素，这对我来说很奇怪。

【问题讨论】：

尝试添加position（例如position:relative;）。

safari 和 ios 哪个版本？

Windows Safari - 5.1.7

不工作@alirezasafian

caniuse.com/#search=flex => 只是最新的 safari，但 ***.com/questions/28976288/…

【参考方案1】：

使用正确的前缀更新您的原始代码。试试这个：

.video-js .vjs-progress-control 
    -moz-box-ordinal-group: 2;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    top: 0;

尽管 Safari 9 支持所有标准的 flex 属性，但在 Safari 8 及更早版本中，您需要使用供应商前缀。

如需快速添加所需的所有前缀，请在此处的左侧面板中发布您的 CSS：Autoprefixer。

有关 flexbox 浏览器支持的详细信息，请参见此处：http://caniuse.com/#search=flexbox

【讨论】：

感谢您的回答@Michael_B，我仍然没有看到任何变化；（

你能发布一个演示（例如，jsfiddle.net）来演示这个问题吗？

嗨 @Michael_B，现在只使用 display:block ，但是 -webkit-transition ， -webkit-order 也不起作用

发布 html。如果我们可以重现问题，我们可以为您提供更多帮助。

谢谢@Michael_B，一旦我创建了一个小提琴，我会在这里发布并让你知道

【参考方案2】：

试试这个-

.video-js .vjs-progress-control 
        -moz-box-ordinal-group: 2;
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        -webkit-box-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        align-items: center;
        -webkit-align-items: center;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex: 1 1 auto;
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1;
        transition: all 0.4s ease 0s;
        -moz-transition: all 0.4s ease 0s;
        -ms-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
        -webkit-transition: all 0.4s ease 0s;
        top: 0;