对同一元素设置overflow-x:hidden,overflow-y:visible;属性值不生效
一、时效性
所有信息都具有时效性。文章的价值,往往跟时间有很大关联。特别是技术类文章,请注意本文创建时间,如果本文过于久远,请读者酌情考量,莫要浪费时间。
二、背景
在一次开发过程中,对一个元素设置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;
即可。
五、参考链接
- http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue
http://www.brunildo.org/test/Overflowxy2.html
六、转载分享
版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
七、如果你觉得此文章对你有帮助,并且想为我买杯咖啡,请扫一扫下面,谢谢。
微信
支付宝
对同一元素设置overflow-x:hidden,overflow-y:visible;属性值不生效的更多相关文章
- 设置实体类型中String类型的属性值为String.Empty
/// <summary> /// 将String类型的属性值设置为String.Empty /// </summary> /// <typeparam name=&qu ...
- 【现学现卖】th:href标签动态路径设置,thymeleaf获取session中的属性值
update:2020-02-28:按道理来说这个功能在前后端分离的时候应该不怎么用的上,基本到现在我还是没遇到过有这样的需求,不过也是一种方法就是.th:href="@{/{role}/l ...
- [Web 前端] inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
cp from : https://blog.csdn.net/iefreer/article/details/50421025 在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面 ...
- JQ获取元素属性值
最近在学习JAVA Web,自己也是做个下列表左右选择的小案例. 获取某个元素的属性值一直以为是要调用atrr方法,不过好像获取元素的数组形式再遍历每个元素的时候想获取到它的属性值用attr方法有问题 ...
- java 中利用反射机制获取和设置实体类的属性值
摘要: 在java编程中,我们经常不知道传入自己方法中的实体类中到底有哪些方法,或者,我们需要根据用户传入的不同的属性来给对象设置不同的属性值,那么,java自带的反射机制可以很方便的达到这种目的,同 ...
- 清除浮动2-父元素设置overflow:hidden
<!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...
- 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法
内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...
- 给元素设置overflow:hidden,pc端正常,但移动端依然可以滑动
给设置overflow:hidden的元素设置position:fixed即可解决
- 为什么设置overflow为hidden可以清除浮动带来的影响
1.问题起源 在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了.使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动 ...
随机推荐
- [转] Asp.net Report Viewer 简单实例
原文链接:http://www.aspsnippets.com/Green/Articles/ASPNet-Report-Viewer-control-Tutorial-with-example.as ...
- cocos2d-x中的Jni使用(C++与Andriod方法互调)
作者:何卫 转载请注明,原文链接:http://www.cnblogs.com/hewei2012/p/3376616.html 前提条件: 1.操作的游戏工程和cocos2d_x游戏引擎是一个目录的 ...
- SSH整合所需jar
Struts2.1.8+Hibernate3.2+Spring4.1.6+MySql ant-1.6.5.jar ant-antlr-1.6.5.jar ant-junit-1.6.5.jar ant ...
- 【转】TLB(Translation Lookaside Buffers,TLB)的作用
原文网址:http://sdnydubing.blog.163.com/blog/static/137470570201122810503396/ 从虚拟地址到物理地址的转换过程可知:使用一级页表进行 ...
- 【转】WPS文档怎么清除格式
原文网址:http://jingyan.baidu.com/article/c74d600060dc4a0f6a595d21.html 我们知道有时候如果我们粘贴了别的地方的文字到自己的文档里来,就会 ...
- 【转】ios app 应用内购买配置完全指南
转自:http://blog.sina.com.cn/s/blog_4b55f6860100sbfb.html 第一印象觉得In-App Purchase(简称IAP)非常简单.Apple提供的大量文 ...
- js获取客户端IP及地理位置
php获取方法: 1.<?php 2.function get_ip_place(){ 3.$ip=file_get_contents("http://fw.qq.com/ipaddr ...
- webview javascript 注入方法
Android中向webview注入js代码可以通过webview.loadUrl("javascript:xxx")来实现,然后就会执行javascript后面的代码. 但是当需 ...
- ecshop 二次开发及模板标签
ecs_account_log // 用户账目日志表 ecs_activity // 活动表(代码,名称,开始,结束,描述) ecs_ad // 广告表(位置,类型,名称,链接,图片,开始,结 ...
- 查询MySQL锁等待的语句
select 'Blocker' role, p.id, p.user, left(p.host, locate(':', p.host) - 1) host, tx.trx_ ...