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用,大家知道当打印信息的地方多了之后在模拟器上跑可能不会有什么问题,因为模拟器用的是电脑 ...
随机推荐
- C# 使用XML序列化对象(一)
在System.Xml.Serialization命名空间中提供了XML序列化类XmlSerializer用于将对象序列化为XML. 下面看一个最简单的例子: public class A { pub ...
- ListView 和 Adapter用法
一个ListView通常有两个职责. (1)将数据填充到布局. (2)处理用户的选择点击等操作. 第一点很好理解,ListView就是实现这个功能的.第二点也不难做到,在后面的学习中读者会发现,这非常 ...
- 使用Web Deploy进行远程部署
Web Deploy支持直接从本地Visual Studio的工程文件部署网站到远程服务器,部署的过程中可以对比哪些文件变化了需要拷贝,而不是一股脑的全部拷贝,效率和准确性会更好. 部署的过程主要要注 ...
- 怎么让alert弹出框的内容可以换行?
在要点击弹出的地方输入这样的代码: alert("文本框中共有字母a的个数为:"+num+"\n"+"他们在字符串的索引为:"+ind) 就 ...
- angularjs的页面拆分思想
//app.js angular.module('MyModule', ['SubModule1', 'SubModule2']) .module('SubModule1', ['CommonModu ...
- 记录一次MVC 3.0错误 HTTP 404您正在查找的资源(或者它的一个依赖项)可能已被移除,或其名称已更改,或暂时不可用。请检查以下 URL 并确保其拼写正确。
在部署到IIS7时,MVC3报了一个找不到资源的错误,文件肯定是有的,而且页面是肯定报错的,也就说内部运行错误了,而MVC把错误没有抛出来而已: 所以对症下药,发觉我的项目里面用了rexs进行多语言, ...
- Erlang第三课 ---- 创建和使用module
----------------小技巧----------------------------- 因为这一课开始,我们要使用Erlang文件操作,所以,我们期待启动shell的时候,当前目录最好是是我 ...
- C++中getline被跳过
#include "stdafx.h" #include"iostream" #include"math.h" #include" ...
- MVC简介
全名是Model View Controller,模型-视图-控制器,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互 ...
- 从系统的gallery获取图片
1 ) 效果演示: 2代码演示 布局代码: