Question

我有一个带有以下CSS的HTML元素：

.examples {
    box-sizing: border-box;
    width: 100%;
    margin-left: 80px;
    transition: transform 0.3s;
    transition-timing-function: cubic-bezier(0, 0, 0.26, 0.89);
    will-change: transform;
    text-align: left;
    min-height: 400px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
}

HTML元素中包含以下元素中的10个元素：

.option {
    flex: 0 0 auto;
    width: 18%;
    max-width: 18%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 1%;
    cursor: pointer;
}

出于某种原因，在Chrome和Safari中，选项元素在示例元素的底部垂直对齐，但在IE 11中并非如此。我如何在IE 11中修复此问题？

Answer 1

尝试：

`

.option {
    flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    width: 18%;
    max-width: 18%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 1%;
    cursor: pointer;
}
.examples {
    box-sizing: border-box;
    width: 100%;
    margin-left: 80px;
    transition: transform 0.3s;
    transition-timing-function: cubic-bezier(0, 0, 0.26, 0.89);
    will-change: transform;
    text-align: left;
    min-height: 400px;
    display: flex;
    flex-direction: row;
    -ms-flex-direction: row;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    align-items: flex-end;
}`

IE中的最小高度和弯曲度

1 个答案: