css - Flexbox 在 Safari 中不起作用，在 Web 检查器中被删除

Question

我正在使用display: flexbox一个包含多个正方形的 div 容器（以使它们水平对齐），它在 Chrome 中运行良好，但在 Safari 8.0 中却不行，它像这样被删除：

#grid {
    overflow-x: hidden;
    overflow-y: scroll;

    position: absolute;
    top: 55px;
    left: 415px;
    bottom: 10px;
    right: 10px;

    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}

.square {
    width: 166px;
    height: 185px;
    position: relative;
    cursor: pointer;
    background-size: 166px 125px !important;
    background-repeat: no-repeat !important;
    background: #FFF;
    margin-right: 20px;
    float: left;
}

Answer 1

你需要使用前缀所以 safari 支持

#grid {
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    top: 55px;
    left: 415px;
    bottom: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
}