overflow-x和overflow-y其中一个设置为visible时的奇怪现象
当overflow-x和overflow-y其中一个设置为visible时,如果另一个不是visible,那么它会被自动重置为auto
看看效果先:
第一次遇到这个问题时,我还以为是chrome的一个bug,结果测试了一下,所有浏览器都是这样的,
看一下效果
.div1 {
width: 100px;
height: 100px;
background: #eee;
position: relative;
overflow-x: hidden;
overflow-y: visible;
}
.div2 {
width: 100px;
height: 100px;
background: #f00;
position: absolute;
left: 50px;
top: 50px;
}
<div class="div1">
<div class="div2"></div>
</div>
理想中的效果是
但是结果却是
我只能说,这太不合理了,对于这个问题,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
’.
翻译过来就是:
overflow-x和overflow-y的计算值跟给定的值相同,除了某些跟'visible'值的不合理组合:如果一个其中一个属性的值被赋为'visible',而另一个被赋值为'scroll'或'auto',那么'visible'会被重置为'auto'。overflow的计算值与overflow-x相等(如果overflow-y相同的话);否则就是一对overflow-x和overflow-y的计算值
其实另一个值设置为hidden的时候,visible也会被重置为auto
查了很久,就是不知道当一个属性设置为visible的时候,另一个设置为scroll这些值有啥不合理的地方
今天是2014-4-2,我觉得我知道为啥它会不合理了
咱们都知道overflow的非visible值会使一个块级元素形成一个bfc(块级格式化上下文)
overflow-x设置为visible,overflow-y设置为非visible,那究竟是触发bfc还是不触发bfc呢?此处冲突,所以充值了overflow-x,使其成为一个bfc
计算值,应该不仅仅是overflow的值,还包括一些附带属性,比如此处是否生成一个bfc
参考资料:
https://developer.mozilla.org/zh-CN/docs/CSS/overflow-x
overflow-x和overflow-y其中一个设置为visible时的奇怪现象的更多相关文章
- 一个关于ExecutorService shutdownNow时很奇怪的现象
我们知道很多类库中的阻塞方法在抛出InterruptedException后会清除线程的中断状态(例如 sleep. 阻塞队列的take),但是今天却发现了一个特别奇怪的现象,先给出代码: publi ...
- 如何不使用 overflow: hidden 实现 overflow: hidden
一个很有意思的题目.如何不使用 overflow: hidden 实现 overflow: hidden? CSS 中 overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么 ...
- 一个设置 material design icon的插件工具
一个设置 material design icon的插件工具 github地址:https://github.com/konifar/android-material-design-icon-gene ...
- highcharts设置Y轴范围及根据Y轴范围设置不同颜色
yAxis : { title : { text : '数据' }, plotLines : [ { value : 0, width : 1, color : '#808080' } ], min: ...
- 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏
设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...
- tr设置display属性时,在FF中td合并在第一个td中显示的问题
今天用firefox测试页面的时候,发现用javascript控制 tr 的显示隐藏时,当把tr的显示由“display:none”改为“display:block”时,该tr下的td内容合并到了 ...
- 【转】 c#中两个DateTimePicker,一个时间设置为0:0:0,另一个设置为23:59:59
[转] c#中两个DateTimePicker,一个时间设置为0:0:0,另一个设置为23:59:59 stp1为第一个DateTimePicker this.dtp1.Value=this.dtp1 ...
- 使用 SetParent 跨进程设置父子窗口时的一些问题(小心卡死)
原文:使用 SetParent 跨进程设置父子窗口时的一些问题(小心卡死) 在微软的官方文档中,说 SetParent 可以在进程内设置,也可以跨进程设置.当使用跨进程设置窗口的父子关系时,你需要注意 ...
- [BS-06] 设置release发布时NSLog不打印设置
设置release发布时NSLog不打印设置 前提:在XCode做开发调试时往往需要打印一些调试信息做debug用,大家知道当打印信息的地方多了之后在模拟器上跑可能不会有什么问题,因为模拟器用的是电脑 ...
随机推荐
- 第三十九课:requestAnimationFrame详解
大家应该都知道,如果一个页面运行的定时器很多,无论你怎么优化,最后肯定会超过指定时间才能完成动画.定时器越多,延时越严重. 为此,YUI,kissy等采用中央队列的方式,将定时器减少至一个.浏览器厂商 ...
- AJAX(二)AJAX框架
上文(AJAX(一)AJAX的简介和基础)对ajax异步请求服务器做了详细的介绍和基础应用,可以看出,ajax的一些过程是相对不变的.不必要每次发送请求都写一遍发送代码,一些ajax开发人员已经把他们 ...
- Java Web技术总结(目录)
来源于:http://www.jianshu.com/p/539bdb7d6cfa Java Web技术经验总结(一) Java Web技术经验总结(二) Java Web技术经验总结(三) Java ...
- jsp笔记
Jsp Web服务器访问jsp的过程. 如果是第一次访问jsp文件,web服务器会把jsp翻译成一个servlet文件.再将其编译成一个.class文件.然后加载到内存.蓝色的地方也是为什么jav ...
- Freemarker-数字默认格式化问题
freemarker在解析数据格式的时候,默认将数字按3位来分割 例如1000被格式化为1,000 这样做看似美观,但在实际操作时候会带来问题.例如我一个页面有一个元素,该元素的值由后台绑定且超过10 ...
- SpringMVC实战
一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 1 2 3 4 5 6 ...
- iOS关于rar解压第三方库Unrar4iOS使用总结
作者最近的公司项目要做实现rar解压的功能,在网上找了很久貌似关于rar解压的资料很少,不过有很多人推荐一个名叫“Unrar4iOS”的第三方开源框架,于是下载并尝试使用发现该开源框架并在使用过程中发 ...
- visual studio各个版本的差异
- 【蒟蒻の进阶PLAN】 置顶+持续连载
看到周围神犇们纷纷列计划,本蒟蒻也决定跟随他们的步伐,计划大约是周计划吧,具体怎么安排我也不确定.. 2015.12.30 刚刚学习完最基础的网络流,需要进行这方面的练习,从简到难,有空余的话尝试学习 ...
- POJ-2777Count Color 线段树+位移
这道题对于我这样的初学者还是有点难度的不过2遍A了还是很开心,下面说说想法-- Count Color Time Limit: 1000MS Memory Limit: 65536K Total Su ...