Chrome 123版本align-content 属性变化的样式问题

205 阅读1分钟

问题背景

最近在维护旧项目时,发现网站标题突然不居中了,以前并没有这种问题:

排查

在审查元素时发现,自己写的title样式,全局还有相同的类名,而这里面有个align-content属性

在去掉align-content后恢复正常

思考

疑惑:align-content属性并没有置灰,说明这个属性是生效的,而align-content只会在flex布局中才会生效,为什么inline-block也会生效?

查阅资料发现:在3月chrome 更新了123版本之后,开始支持在block布局中使用align-content属性,所以导致align-content:center属性在inline-block中生效,导致文字居中div,产生样式问题。

相关链接:developer.chrome.com/blog/align-…