文档章节

神奇的hasLayout

小微
 小微
发布于 2012/07/10 20:32
字数 854
阅读 85
收藏 0

在IE浏览器各个版本中,有一个概念需要特别注意,就是hasLayout。hasLayout是IE浏览器专有的一个属性,用于CSS的解析引擎。它的设计初衷是用于辅助块级元素的盒模型解析。恰当的使用它可以降低浏览器的渲染压力。虽然人们不常直接提到它,但是它常常出现在我们开发的问题中。因为有时IE下一些复杂CSS的设置问题解析起来会出bug,就是因为hasLayout没有被自动触发。下面举两个例子:

1. 滤镜效果

div#box {
    background:red;
    filter:alpha(opacity=50);
}
<!DOCTYPE html>
…
<div id=“box”>
    text
</div>

在IE各个版本浏览器中运行发现,IE8可以正常显示滤镜效果,而IE6/7无法显示滤镜效果。这就是没有激活hasLayout的缘故,因为没有hasLayout的元素上滤镜不起作用。div和span默认就没有hasLayout。

激活元素的hasLayout的方法就是进行某些css设置,如:

  • position:如position: relative(可能带来副作用)
  • float
  • width(!auto)
  • height(!auto):如height: 1%(可能带来副作用,因为在IE6下管用,在IE7下就不行了
  • zoom:如zoom: 1(最安全,又没有副作用,但极特殊的情况下可能无效,那时就要借助position: relative
  • overflow

因此上面的例子可以做如下改动:

div#box {
    background:red;
    filter:alpha(opacity=50);
    height:19px;
}

2. “不合时宜”的矩形

hasLayout元素默认显示为矩形。因此有时不小心错误地激活了hasLayout之后会出现错误的效果。

#pic {
    float:left;width:50px;height:50px;
}
#content {
    border:1px solid blue;
    background:yellow;height:100%;
}
<div>
    <div id=“pic”></div>
    <div id=“content”>long text…</span>
</div>

上面的代码在Firefox和IE8中都能正常显示为:

但是在IE6/7中的显示则是:

#content {
    border:1px solid blue;
    background:yellow;height:100%;
}

之所以如此是因为#content中对height的设置触发了#content的hasLayout,因此它显示为矩形而不是不规则图形。解决方法就是将对height的设置写在离元素最近的wrapper样式设置上:

#pic {
    float:left;width:50px;height:50px;
}
#content {
    border:1px solid blue;
}
<div style=“background:yellow;height:100%;”>
    <div id=“pic”></div>
    <div id=“content”>long text…</span>
</div>

上文的内容整理自淘宝前端开发教程——《深入剖析浏览器》。

3. 利用hasLayout在IE6/7中实现display:inline-block

IE6/7支持的display类型只有block、inline和none三种。但是inline-block也是一种很有用的特性。它是行内的块级元素,可以像块级元素一样设置长宽,设置margin和padding,但它和行内元素一样,不独占一行,它的宽度不占满父元素,而是和其他行内元素一起排列在一行中。

上面提到hasLayout是为块级元素设计的,所以触发行内元素的hasLayout可以让行内元素也拥有一些块级元素的特性。设置方法如下:

span{
    ...
    display: inline-block;  //这句话在IE6/7中其实不起作用,只是触发hasLayout
    width: 100px;           //现在可以像块元素那样给“行内元素”设置宽了
    height: 30px;           //现在可以像块元素那样给“行内元素”设置高了
    *vertical-align: -10px; //为了使span和块元素一样顶端对齐,而不是底部对齐
}
上文的内容来自《编写高质量代码——Web前端开发修炼之道》。

© 著作权归作者所有

小微
粉丝 117
博文 78
码字总数 81696
作品 0
海淀
程序员
私信 提问
认识hasLayout——IE浏览器css bug的一大罪恶根源

什么是hasLayout?hasLayout 是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。当...

lixiaokai2008
2013/09/06
296
0
IE的hasLayout详解

什么是 haslayout ?     “Layout”是一个 IE/Win的私有概念,它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等,...

sunshinewyf
2015/10/06
63
0
低版本IE中CSS的bug之源“haslayout”

haslayout 是Windows InternetExplorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调...

hyz000
2016/04/24
19
0
【CSS】 IE6 ,7下a链接失效的问题及解决方案

问题描述: web应用中,经常需要在图片上添加相应的链接,而且相对于传统的文字链接的方式,不仅美观,而且有更大的可点击区域。例如,京东网图书页面的一个简单布局: 这种情况是几乎没有任...

编译中ing
2018/09/14
18
0
IE zoom:1 原理 以及应用

IE zoom:1 原理 zoom: 1 是为了 IE 早期的浏览器,有 layout 的毛病,所以用 zoom: 1 代表这个 div 是有高度宽度的 效果跟 overflow: hidden 可以装载浮动物件一样 我们经常在调试浏览器兼容...

柒月-小妖精
2015/09/10
201
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot2单元测试

引入maven依赖 引入powermock是为了解决静态方法mock的问题。 <dependency> <groupId>org.powermock</groupId> <artifactId>powermock-module-junit4</artifactId> <version>2.......

一刀
13分钟前
1
0
webpack优化公司内部分享ppt小记

Webpack整个的构建过程是基于事件流 Webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关...

莫西摩西
14分钟前
1
0
DevOps落地实践,BAT系列,敏捷看板

DevOps 自 2009 年诞生以来,至今整整过去了十年,从最初的摸索,逐步变成一种主流的软件开发交付模式。BAT在2014年左右,甚至更早的时候,内部的DevOps系统就已经差不多成型了,比如腾讯的织...

cs平台
18分钟前
2
0
Stylus 简单应用

1、安装 cnpm install stylus 2、基本语法 stylus中文版参考文档 3、命令行下编译 styl 文件,生成压缩的css文件 编译src目录下styl文件 stylus --compress /src 更多命令可以执行查找 styl...

微笑吔彷徨
19分钟前
2
0
Java正则表达式大全

1、匹配中文:[\u4e00-\u9fa5] 2、英文字母:[a-zA-Z] 3、数字:[0-9] 4、匹配中文,英文字母和数字及下划线:^[\u4e00-\u9fa5_a-zA-Z0-9]+$ 同时判断输入长度: [\u4e00-\u9fa5_a-zA-Z0-9_]{4...

叶湘伦
27分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部