bug记录:IE8,包含块min-height/height共存时的高度计算bug
问题的条件有:
- A元素是B元素的包含块。
- A元素设置
overflow:hidden;
,并同时设置了height
和min-height
,同时height计算值
<min-height
- 原生IE8浏览器,或者IE9浏览器的IE8兼容性模式(以下统称为IE8)
期待结果:
- 若B元素为absolute定位元素,A元素为relative定位元素,则B元素的包含块高度为A元素的padding-edge高度
- 若A、B元素均为常规流定位元素,则B元素的包含块高度为A元素的content-box高度
- 若A元素同时设置了
min-height
和height
,同时height计算值
小于min-height
。因为height
权重小于min-height
,最终A元素的content-box高度计算值应以min-height
为准
IE8的bug是:
- 若B元素的包含块的content-box的值计算错误,在
height计算值
小于min-height
的同时,误取了heihgt
值作为其包含块的content-box部分 - B元素跟其包含块有关的属性,如
百分比top
/bottom
/百分比height
均受到影响,因此,B元素的位置可能受到影响 - A元素的最终高度计算依然正确
- 受到影响的仅仅是以A元素为包含块的元素,包括B元素
DEMO
- 一个使用了absolute定位的DEMO:
http://jsfiddle.net/humphry/Xzy28/7/
- 一个未使用absolute定位的DEMO,可见jsfiddle:
http://jsfiddle.net/humphry/NSCLa/8/
我们看一下渲染结果的区别。
计算流程,试解释
absolute | static | |
其他浏览器 | 外层高500/内层高500 | 外层高500/内层高300 |
IE8 | 外层高500/内层高220 | 外层高500/内层高20 |
我们先看看外层的计算。
.wrapper
的height
是20px,被min-height
的300px覆盖,最终的高度值为:100px padding-top
+ 100px padding-bottom
+ 200px height计算值
= 500px。这里所有的浏览器都计算正确。
对于内层,IE8/其他正常浏览器,在absolute定位和static定位下的区别有:
- 正常浏览器,
.inner
absolute定位:.inner
设置了100%高度,即100%的包含块的高度,即外层容器的padding-edge高度,也就是外层容器的 200pxpadding高度
+ 300pxcontent-box高度
= 500px IE8浏览器,
.inner
absolute定位:.inner
的包含块的content-box高度
误用了height
值而非min-height值
,计算出来高度值为 200pxpadding高度
+ 20pxheight高度
= 220px正常浏览器,
.inner
static定位:.inner
设置了100%高度,即100%的包含块的高度,即外层容器的content-box高度,也就是外层容器的 300pxcontent-box高度
= 300px- IE8浏览器,
.inner
static定位:.inner
的包含块的content-box高度
误用了height
值而非min-height
值,计算出来高度值为 20pxheight高度
= 20px
解决方案
- 去掉.wrapper上的
overflow:hidden;
overflow:hidden;
加在不【同时设置height
、min-height
,且height计算值
<min-height
】的元素上
参考资料
- 关于包含块的判定:http://w3help.org/zh-cn/kb/008/
bug记录:IE8,包含块min-height/height共存时的高度计算bug的更多相关文章
- CSS2.1SPEC:视觉格式化模型之包含块
原汁原味的才是最有味道的,在阅读CSS标准时对这一点的体会更加深刻了,阅读文档后的一大感觉就是很多看上去理所应当的样式表现也都有了对应的支持机制.本文首先从包含块写起,一方面总结标准中相应的阐述,并且 ...
- # bug 查找 (一) 快速记录 IE8 下三个问题
bug 查找 (一) 快速记录 IE8 下三个问题 昨天 pc 端网站上灰度,发现多个在 IE8 下的问题,描述和解决方案如下: 第一个问题是 css 文件过大 现象 把项目所有的 css 打包成单个 ...
- 转: Firefox 浏览器对 TABLE 中绝对定位元素包含块的判定有错误
标准参考 元素的包含块 W3C CSS2.1 规范中规定,绝对定位元素的包含块(containing block),由离它最近的 position 特性值是 "absolute". ...
- <p></p>标签为什么不能包含块级标签?还有哪些特殊的HTML标签?
最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li& ...
- * CSS 视觉格式化(基本框、包含块、盒模型、水平格式化、垂直格式化、行布局、em框、内容区、行间距、行内框、行框)
前言 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应该显示的 ...
- 【疑点】<p></p>标签为什么不能包含块级标签?还有哪些特殊的HTML标签?
最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li& ...
- CSS学习笔记——包含块 containing block
以下内容翻译自CSS 2.1官方文档.网址:https://www.w3.org/TR/CSS2/visudet.html#strut 有时,一个元素的盒子的位置和尺寸根据一个确定的矩形计算,这个确定 ...
- 由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)
写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...
- 包含块( Containing block ) 转自W3CHelp
包含块简介 在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称作是包含块( containing block ). 一般来说,(元素)生成的框会扮演它子孙元素包含块 ...
随机推荐
- 【java规则引擎】drools6.5.0版本中kmodule.xml解析
kmodule.xml文件存放在src/main/resources/META-INF/文件夹下. <?xml version="1.0" encoding="UT ...
- 【3】SpringMVC的Controller
1SpringMvc的Controller是线程安全的吗? (1)由于是单例,tomcat的多线程环境访问,属性必须是不可变的,如果可变,会产生脏数据,线程不安全 2Spring的事务管理 (1)ao ...
- vscode: Visual Studio Code 常用快捷键【轉】
主命令框 F1 或 Ctrl+Shift+P: 打开命令面板.在打开的输入框内,可以输入任何命令,例如: 按一下 Backspace 会进入到 Ctrl+P 模式 在 Ctrl+P 下输入 > ...
- Codeforces Round #318 [RussianCodeCup Thanks-Round] (Div. 1) C. Bear and Drawing
题目链接:http://codeforces.com/contest/573/problem/C题目大意:在两行无限长的点列上面画n个点以及n-1条边使得构成一棵树,并且要求边都在同一平面上且除了节点 ...
- 运行maven打出来的jar包报错:Unable to locate Spring NamespaceHandler for XML schema namespace
问题背景:新建了一个maven项目,打了一个可运行jar包,依赖了spring几个jar包,一跑就报错了 E:\workspace\point-circle\target>java -jar p ...
- Dobbo问题及解决方案:forbid-consumer
本地运行Dubbo经常出现以下情况: com.alibaba.dubbo.rpc.RpcException: Forbid consumer 10.0.53.69 access service com ...
- POJ1325(最小顶点覆盖)
Machine Schedule Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 14429 Accepted: 6153 ...
- git 远程仓 和 本地仓 记录
一.远程仓添加信息后 ,本地环境修改信息后,上传 远程仓 coding=utf-8 本地仓 coding=utf-8 本地仓同步后 会提示存在冲突: (其中 HEAD 是当前非支的意思,可以理解为当前 ...
- 【转】使用JMeter 完成常用的压力测试(二)
使用JMeter 完成常用的压力测试 Login.jsp 和welcome.jsp.其中 login.jsp 负责生成 User 对象,并调用 User 的login.当 login 返回为 true ...
- 【转】Jmeter做web压力测试时设置持续时间注意点
头一回使用jmeter做web的压力测试,遇到个很莫名其妙的问题,不管我的线程组怎么设置,它就是执行一次就结束了. 设置循环次数为300,不使用调度器--〉执行一次就结束了,循环次数未生效 设置循环次 ...