资讯专栏INFORMATION COLUMN

overflow属性便捷语法的不兼容问题

Raaabbit / 999人阅读

摘要:属性的便捷语法的属性定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。这里介绍一下该属性的便捷语法,赋予两个值,分别控制和。便捷语法需要注意的问题的便捷语法是个比较新的属性。

overflow属性的便捷语法

CSS的overflow属性定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。是overflow-x和overflow-y的简写属性。

一般,我们会赋予它单个值,比如visible,hidden,scroll。这里介绍一下该属性的便捷语法,赋予两个值,分别控制overflow-x和overflow-y。
比如:overflow: hidden auto;相当于overflow-y:hidden; overflow-x: auto;

以上就是overflow属性的便捷语法。

便捷语法需要注意的问题

overflow的便捷语法是个比较新的属性。 可能习惯了CSS便捷写法的我们会认为,这种写法理所当然的早就应该支持。然而事实不是这样——
overflow便捷语法对应的overflow-x和overflow-y的顺序,还尚未达成一致。根据MDN的说法,为了匹配使用新逻辑属性overflow-block和overflow-inline时的顺序,Firefox 63就尝试将之前的顺序颠倒了一遍。然而到现在,FireFox 67依然没有做出这样的更新,Chrome 74也没有。展示如下:

FireFox 67

Chrome 74

至于移动端的浏览器,笔者并未过多测试,估计目前采取的做法是取第一个值

总结

关于笔者为何调查这么蛋疼的问题,当然是因为工作中遇到了问题。Chrome中白纸黑字,明确告诉笔者的先X后Y的顺序,到了iOS的移动端,不论safari还是webview,都没有正确的展现——
overflow: hidden auto;本意是x轴隐藏,y轴滚动,到了iOS移动端,y轴就是不按照规则滚动;待笔者改为overflow: auto hidden;,y轴才正常滚动。于是有此文。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53943.html

相关文章

  • overflow属性便捷语法的不兼容问题

    摘要:属性的便捷语法的属性定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。这里介绍一下该属性的便捷语法,赋予两个值,分别控制和。便捷语法需要注意的问题的便捷语法是个比较新的属性。 overflow属性的便捷语法 CSS的overflow属性定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。是overflow-x和overflow-y的简写属性。 一般,我们会...

    104828720 评论0 收藏0
  • overflow属性便捷语法的不兼容问题

    摘要:属性的便捷语法的属性定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。这里介绍一下该属性的便捷语法,赋予两个值,分别控制和。便捷语法需要注意的问题的便捷语法是个比较新的属性。 overflow属性的便捷语法 CSS的overflow属性定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。是overflow-x和overflow-y的简写属性。 一般,我们会...

    blastz 评论0 收藏0
  • 关于CSS Reset 那些事(四)之 构架CSS基础样式库

    摘要:现在回到我们这一章节的标题,将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面,网页上并不存在表单内容,那么你就要移除一些冗余的代码,开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节,我们都说了哪些内容: CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...

    mj 评论0 收藏0

发表评论

0条评论

Raaabbit

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<