当前位置: 首页 > Web前端 > CSS

与溢出属性便利语法不兼容

时间:2023-03-30 15:05:35 CSS

溢出属性便利语法CSS溢出属性定义当元素的内容太大而无法放入块级格式化上下文时要执行的操作。overflow-x和overflow-y的简写属性。一般我们会给它一个单一的值,比如visible、hidden、scroll。这里简单介绍一下这个属性的便捷语法,给出两个值分别控制overflow-x和overflow-y。例如:overflow:hiddenauto;相当于overflow-y:hidden;溢出-x:自动;以上是overflow属性的便捷语法。ConvenienceSyntaxConvenienceSyntax溢出的便利语法是一个相对较新的属性。我们可能习惯了CSS这种便捷的写法,我们会认为这种写法应该早就支持了。然而,事实并非如此——溢出便利语法对应的overflow-x和overflow-y的顺序尚未达成一致。根据MDN,为了在使用新的逻辑属性overflow-block和overflow-inline时匹配顺序,Firefox63试图颠倒之前的顺序。不过到现在为止,FireFox67还是没有做这样的更新,Chrome74也没有。显示如下:FireFox67Chrome74至于手机浏览器,笔者也没有过多测试,估计目前的方法是取第一个值。总结一下作者为什么要调查这样一个痛苦的问题,当然是因为工作中遇到的问题。在Chrome中黑白分明的告诉笔者先X后Y的顺序。在iOS移动端无论是safari还是webview都显示不正确——overflow:hiddenauto;初衷是隐藏x轴,滚动y轴。说到iOS移动端,y轴不按规则滚动;当作者将其更改为overflow:autohidden;时,y轴正常滚动。于是有了这篇文章。