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

Question

我创建了一个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;
}

我该怎么做才能使它适用于旧版本也是

Answer 1

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

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

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

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

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

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