作者:孙志勇 微博

日期:2016年12月5日

一、时效性

所有信息都具有时效性。文章的价值,往往跟时间有很大关联。特别是技术类文章,请注意本文创建时间,如果本文过于久远,请读者酌情考量,莫要浪费时间。

二、背景

在一次开发过程中,对一个元素设置CSS overflow-x: hidden; and overflow-y: visible; ,理想状况下,在X轴超出部分隐藏,Y轴超出部分显示。然而,元素属性并没有生效。

三、原因

根据W3C的说法,如下

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.

也就是说,如果同一个元素X,Y轴上,其中一个设置了visible,例外一个设置了scoll或者auto,这时候,visible属性自动转变为auto

四、解决方法

在目标属性外,嵌套父层,一个设置overflow-x: hidden;另外一个设置, overflow-y: visible; 即可。

五、参考链接

  1. http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue
  2. http://www.brunildo.org/test/Overflowxy2.html

    六、转载分享

    版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证

    七、如果你觉得此文章对你有帮助,并且想为我买杯咖啡,请扫一扫下面,谢谢。

    微信



    支付宝

对同一元素设置overflow-x:hidden,overflow-y:visible;属性值不生效的更多相关文章

  1. 设置实体类型中String类型的属性值为String.Empty

    /// <summary> /// 将String类型的属性值设置为String.Empty /// </summary> /// <typeparam name=&qu ...

  2. 【现学现卖】th:href标签动态路径设置,thymeleaf获取session中的属性值

    update:2020-02-28:按道理来说这个功能在前后端分离的时候应该不怎么用的上,基本到现在我还是没遇到过有这样的需求,不过也是一种方法就是.th:href="@{/{role}/l ...

  3. [Web 前端] inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

    cp from : https://blog.csdn.net/iefreer/article/details/50421025 在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面 ...

  4. JQ获取元素属性值

    最近在学习JAVA Web,自己也是做个下列表左右选择的小案例. 获取某个元素的属性值一直以为是要调用atrr方法,不过好像获取元素的数组形式再遍历每个元素的时候想获取到它的属性值用attr方法有问题 ...

  5. java 中利用反射机制获取和设置实体类的属性值

    摘要: 在java编程中,我们经常不知道传入自己方法中的实体类中到底有哪些方法,或者,我们需要根据用户传入的不同的属性来给对象设置不同的属性值,那么,java自带的反射机制可以很方便的达到这种目的,同 ...

  6. 清除浮动2-父元素设置overflow:hidden

    <!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...

  7. 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法

    内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...

  8. 给元素设置overflow:hidden,pc端正常,但移动端依然可以滑动

    给设置overflow:hidden的元素设置position:fixed即可解决

  9. 为什么设置overflow为hidden可以清除浮动带来的影响

    1.问题起源 在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了.使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动 ...

随机推荐

  1. CentOS6.6安装mysql出现的问题

    mysql编译需要cmake,我的cmake-2.6.4-5.el6.i686,最新版的是3.1.0,我就先用2.6.4的试试 ​ [root@localhost src]# wget http:// ...

  2. codevs 1171 潜伏者

    要是NOIP自己这样水就完了... 仔细啊!!!! #include<iostream> #include<cstdio> #include<cstring> #i ...

  3. 用实例分析H264 RTP payload

    用实例分析H264 RTP payload H264的RTP中有三种不同的基本负载(Single NAL,Non-interleaved,Interleaved) 应用程序可以使用第一个字节来识别. ...

  4. linux面试题3

    1. 下面的网络协议中,面向连接的的协议是: A . A 传输控制协议 B 用户数据报协议 C 网际协议 D 网际控制报文协议 2. 在/etc/fstab文件中指定的文件系统加载参数中, D 参数一 ...

  5. <一>SQL优化1-4

    第一条:去除在谓词列上编写的任何标量函数        --->在select 显示列上使用标量函数是可以的.但在where语句后的过滤条件部分对列使用函数,需要考虑.因为执行sql的引擎会因为 ...

  6. 本博客迁移到Github,之后停止更新

    本博客之后停止更新或者更新不是很及时,关注博客请移步   http://waylife.github.io 或者 http://blog.13kbook.com   谢谢支持. Update Time ...

  7. MyBatis 入门到精通(一) 了解MyBatis获取SqlSession

    MyBatis是什么? MyBatis是一款一流的支持自定义SQL.存储过程和高级映射的持久化框架.MyBatis几乎消除了所有的JDBC代码,也基本不需要手工去设置参数和获取检索结果.MyBatis ...

  8. javascript 面向对象制作坦克大战 (一)

    PS:这个坦克大战是在网上下的一段源码之后,自己进行的重写.   写这个的目的是为了巩固自己这段时间对js的学习.整理到博客上,算是对自己近端时间学习js的一个整理. 同时也希望可以帮助到学习js的园 ...

  9. Fitnesse-20140630与RestFixture-3.1编译与运行步骤

    为了能使RestFixture-3.1在Fitnesse-20140630中正确打印测试结果,准备修改RestFixture. 1.下载并编译Fitnesse-20140630 以下步骤以在64位Wi ...

  10. 【hadoop代码笔记】Hadoop作业提交中EagerTaskInitializationListener的作用

    在整理FairScheduler实现的task调度逻辑时,注意到EagerTaskInitializationListener类.差不多应该是job提交相关的逻辑代码中最简单清楚的一个了. todo: ...