CSS魔法堂:hasLayout原来是这样!
前言
过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的,那就是hasLayout。趁着最近突然发神经打算好好学习CSS,顺便解答多年来的疑惑。
hasLayout到底是何方神圣?
hasLayout可以简单看作是IE5.5/6/7中的BFC(Block Formatting Context)。也就是一个元素要么自己对自身内容进行组织和尺寸计算(即可通过width/height来设置自身的宽高),要么由其containing block来组织和尺寸计算。而IFC(即没有拥有布局)而言,则是元素无法对自身内容进行组织和尺寸计算,而是由自身内容来决定其尺寸(即仅能通过line-height设置内容行距,通过行距来支撑元素的高度;也无法通过width设置元素宽度,仅能由内容来决定而已)
当hasLayout为true时(就是所谓的"拥有布局"),相当于元素产生新BFC,元素自己对自身内容进行组织和尺寸计算;
当hasLayout为false时(就是所谓的"不拥有布局"),相当于元素不产生新BFC,元素由其所属的containing block进行组织和尺寸计算。
和产生新BFC的特性一样,hasLayout无法通过CSS属性直接设置,而是通过某些CSS属性间接开启这一特性。不同的是某些CSS属性是以不可逆方式间接开启hasLayout为true。并且默认产生新BFC的只有html
元素,而默认hasLayout为true的元素就不只有html
元素了。
另外我们可以通过object.currentStyle.hasLayout
属性来判断元素是否开启了hasLayout特性。
到这里我们应该了解到若要理解hasLayout则必须理解BFC,因此这里可参考CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins
默认hasLayout==true
的元素
<html>, <body>
<table>, <tr>, <th>, <td>
<img>,<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>,<marquee>
触发hasLayout==true
的方式
display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)
IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout :
min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值,仅用于块级元素)
overflow-x: (除 visible 外任意值,仅用于块级元素)
overflow-y: (除 visible 外任意值,仅用于块级元素)
position: fixed
IE6 以前的版本(也包括 IE6 及以后所有版本的混杂模式,其实这种混杂模式在渲染方面就相当于 IE 5.5), 通过设置任何元素的 'width' 或 'height'(非auto)都可以触发 hasLayout ; 但在 IE6 和 IE7 的标准模式中的行内元素上却不行,设置 'display:inline-block' 才可以。
其中通过display:inline-block
或min-width:0
或min-height:0
将不可逆地启用hasLayout特性。而在没有其他属性启用hasLayout时,可通过以下方式关闭hasLayout
max-width, max-height (设为 "none")(在IE7中)
position (设为 "static")
float (设为 "none")
overflow (设为 "visible") (在IE7中)
zoom (设为 "normal")
writing-mode (从 "tb-rl" 设为 "lr-t")
而产生新BFC的CSS属性
position:absolute/fixed
float:left/right
display:inline-block/table-cell/table-caption/flex/inline-flex
overflow:(除visible外任意值)
可以看到导致产生新BFC的方式和触发hasLayout==true
的方式不完全重叠。因此hasLayout==true所引发的问题,很大程度可以理解为在不应该的或没有预料到的地方产生新的BFC导致的。
如何兼容?
仅当一个元素即在 IE 早期版本中触发了 hasLayout,又在其他浏览器中创建了 block formatting context 时,才能避免上述问题的发生。即同时启用上述两者以保证各浏览器的兼容,或者相反,两者皆不启用。
- 使元素即生成了 block formatting context,又触发了 hasLayout 1.1 对于触发 hasLayout 的元素,通过 CSS 设置,使它产生 block formatting context; 1.2 生成 block formatting context 但是没有触发 hasLayout 的元素,通过设置 'zoom:1',使其触发 hasLayout。
- 使元素即没有触发 hasLayout,又没有创建 block formatting context。
总结
虽然我现在已经不用再适配IE5.5/6/7了,但理解hasLayout还是很有必要的。其实可以理解为从另一个角度学习BFC吧!
感谢
谈谈BFC与ie特有属性hasLayout RM8002: 不能同时在 IE6 IE7 IE8(Q) 中触发 hasLayout 并在其他浏览器中创建 Block Formatting Context 的元素在各浏览器中的表现会有差异
- Linux下检测内存泄露的工具 valgrind
- 轻度Linux服务器维护人员常用的Shell脚本命令
- Gogland更名为GoLand,并附加新功能
- go(golang)中的类型转换
- 送你们几个字!对!就是MACCMS注入!
- Golang 序列化之 ProtoBuf
- 《大话数据结构》 查找 以及一个简单的哈希表例子
- 《大话数据结构》树以及赫夫曼编码的例子
- 《大话数据结构》一些基础知识
- Golang RPC 之 gRPC
- 厚土Go学习笔记 | 06. 变量
- 厚土Go学习笔记 | 05. 函数
- Implement Domain Object in Golang
- 厚土Go学习笔记 | 04. 导入和导出的不同 用math.Pi来举例
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- redis学习(十一)
- 互联网软件常见开发方法
- 利用Vue实现简易tab切换效果
- 第3天:最近笔试编程题汇总
- 设计模式学习(四)-UML中的类图及类图之间的关系
- 数据结构与算法(一)——学习工具的推荐
- sparc v8架构的异常处理
- 设计模式(五)-工厂方法模式
- html 的div或其他元素监听 resize事件不生效的解决办法
- 基于docker部署skywalking实现全链路监控
- 数据结构与算法(二)——十大排序算法
- VUE项目使用.env文件配置全局环境变量
- 设计模式学习(六)-抽象工厂模式
- 彻底完美解决安卓苹果手机点击输入框网页页面自动放大缩小
- 第22天:NLP实战(六)——基于PaddleHub的疫情期间网民情绪识别