为什么 align-items css 不适用于旧版本的 Chrome 和 Firefox？答案

【问题标题】：Why is align-items css not working for older versions of Chrome and Firefox?为什么 align-items css 不适用于旧版本的 Chrome 和 Firefox？
【发布时间】：2020-12-24 21:40:38
【问题描述】：

我创建了一个 html 表单，我在其中设置了 align-items:center 属性，该属性适用于较新版本，但不适用于旧版本。

这是我的html

    <div class="zip-input-social input-social" >
                    <div class="zipInput-div">
                        <label for="zip">Zip:</label>
                        <input type="text" name="zip" id="zip" class="textinput formfield zipInput" maxlength="5" >
             </div>
</div>

这是我的css

.input-social {
    padding: 7px 0;
}
.zip-input-social {
    display: block!important;
}
.input, .input-social {
    padding: 17px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.input-social .zipInput-div {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
label {
    font-family: Arial;
    font-size: 14px;
    position: absolute;
    z-index: 1;
    left: 35px;
    color: #2a2a2c;
}

我应该怎么做它也适用于旧版本

【问题讨论】：

标签： html css flexbox cross-browser

【解决方案1】：

需要更多信息，您使用的是哪些旧版本？

您可以使用 caniuse 网站检查浏览器与 HTML 和 CSS 功能的兼容性。

align-items 不受 Firefox 版本 19 和以前版本的支持。
Chrome 20 和以前的版本也不支持它。
Chrome 版本 51 - 21 需要前缀 -webkit-。

参考：https://caniuse.com/#feat=mdn-css_properties_align-items_flex_context

如果您使用的是上面提到的更新版本，我建议您提及哪个元素 align-items 不起作用。

如果是标签，则不起作用，因为您使用的是position: absolute。

【讨论】：