Question

我正在上课，这在所有浏览器上运行良好，但不适用于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中唯一可见的元素，这对我来说很奇怪。

Answer 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

Answer 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;
    }

Flexbox CSS无法与Safari配合使用

2 个答案: