浅析CSS中的haslayout

作为一名web开发人员,最大的希望不是自己的水平有多高,而是希望浏览器厂家能够统一标准,相信任何一个只要是接触过web程序开发的人员都有那样的感受,就是浏览器之间的兼容性问题总是让我们的工作平添诸多的麻烦,就拿一个简单的ajax来说,IE和DOM之间的获得ajax对象的方式就有很多的差别,还有就是有一些的效果在某些浏览器上面根本就得不到很好的支持,从而造成了混乱以及重复累赘的工作。下面我们要讲述的haslayout就是IE的特殊产物。

首先明确一个概念,haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout),但是现在哦haslayout在IE8以及后面更高的版本中取消了,其只针对IE8一下的版本有效。

为什我们要提到haslayout呢?它究竟有什么作用呢?我们知道只有当一个元素有了haslayout属性之后,他才可以对自身以及对其子元素的尺寸和定位进行计算的能力,就是说如果它的其中一个子元素有自己的定位的话,这个子元素就将负责计算自己以及自己子元素的尺寸,但是这个子元素的定位将受到其父元素的影响。

还有一些元素他们拥有自己特有的长和高,即使没有定义他们的长和高,比如说button,inputs等等,这就说明他们与生俱来的haslayout属性,既然有元素是与生俱来的,那肯定与之对应的就是我们的后天形成了,这里就要提到通过我们后天设置一些特别的css样式来触发layout,当然这个就像我们的炸弹一样,一旦触发就不可能修改。这些元素包括div span等。

这里如果拥有了layout之后,这些元素就被限制在了一个独立的盒子中了,这一点和我们的bfc很像,通过这样,我们的元素就不会影响到外部的元素,而自身也不会受到外部元素的影响。这就是所谓的一旦有了layout就触发了bfc,将自己锁起来了。这样也有一个弊端,就是被锁起来之后,该元素就无法自适应了,也不会适应别的元素,于是乎就可能产生一些怪异现象,甚至影响整个的布局。

下面将介绍一些重置haslayout的方法,

  * width , height ( 设为 auto )

  * max-width , max-height ( 设为 none ) [ IE7 ]

  * position ( 设为 static )

  * float ( 设为 none )

  * overflow ( 设为 visible )

  * zoom ( 设为 normal )

通过这些的话,可以重置我们的haslayout属性。还有一些就是怎么激活这个属性,下面将罗列一些常见的:

只需要将position: absolute设置绝对定位可能会引发新的问题。float: left|rightIE下的浮动也会产生一些莫名其妙的问题。display: inline-block当一个内联元素需要haslayout属性时就需要用它,但是IE本身不支持inline-block的,只是表现得像标准里说的inline-block。width: 除‘auto‘外的任意值优先考虑使用该属性。height: 除‘auto‘外的任意值对 IE6 及更早版本来说很常用,该方法被称为霍莉破解(Holly hack),即设定这个元素的高度为 1% (height:1%;)。但是要注意,当这个元素的 overflow 属性被设置为 visible 时,这个方法就失效了。zoom: 除‘normal‘外的任意值又一个ie私有属性,不兼容标准。zoom:1可以在测试或者不追求标准的情况下使用,效果不错。writing-mode: tb-rlie私有属性,不推荐用。

时间: 2024-08-30 07:51:31

浅析CSS中的haslayout的相关文章

css中zoom:1以及z-index的作用

一.CSS中zoom:1的作用在做IE6.IE7.IE8浏览器兼容的时候,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:1.触发IE浏览器的haslayout2.解决IE下的浮动,margin重叠等一些问题. 二.z-index:auto|number; ◆auto遵从其父对象的定位 ◆number无单位的整数值.可为负数CSS样式,把z-index设置为999或很大,是什么意思?z-index是针对网页显示中的一个特殊属性.因为显示器是显示的图案是一个二维平面,拥有x轴和y轴来表

CSS中 Zoom属性

其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支撑.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小感化,比如触发ie的hasLayout属性,清除浮动.清除margin的重叠等. Zoom的应用办法: zoom : normal | number normal : 默认值.应用对象的实际尺寸 number : 百分数 | 无符号浮点实数.浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数,可所以数值,

CSS中zoom:1的作用 ,小标签大作用

CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题.比如,本站使用DIV做一行两列显示,HTML代码: <div class="h_mainbox"> <h2>推荐文章</h2> <ul class="mainlist"> <li><a href=&quo

(转载)CSS中zoom:1的作用

CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题.HTML代码: 1 <div class="h_mainbox"> 2 <h2>推荐文章</h2> 3 <ul class="mainlist"> 4 <li><a href="#"

css中的zoom的使用

css中的zoom的使用  zoom : normal | number  normal : 默认值.使用对象的实际尺寸  number : 百分数 | 无符号浮点实数.浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数,可 以是数值,也可以是百分比.如:zoom:1,zoom:120%. ps:网上都说是ie的专有属性,本人亲测chrome下也可以使用:(Firefox浏览器不支持) 实例一: .first-div{ width

CSS 中,用 float 和 position 的区别是什么?

呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和position这两者并没有孰好孰不好的问题,两者按需使用,各得所需的效果.float从字面上的意思就是浮动,这种在印刷排版之类中可能解释的更加贴切.float能让元素从文档流中抽出,它并不占文档流的空间,典型的就是图文混排中文字环绕图片的效果了.并且float这也是目前使用最多的网页布局方式.不过需要注意的是清除浮动是你可能需要注意的地方.并且如果你要考虑到古老的IE6

css中的zoom的作用

CSS中zoom:1的作用 兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用: 触发IE浏览器的haslayout 解决ie下的浮动,margin重叠等一些问题. 比如,本站使用DIV做一行两列显示, HTML代码: 复制代码 代码如下: <div class="h_mainbox"> <h2>推荐文章</h2> <ul class="mainlist"> <li>

CSS中不为人知Zoom属性的使用介绍(IE私有属性)

其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的重叠等. Zoom的使用方法: zoom : normal | number normal : 默认值.使用对象的实际尺寸 number : 百分数 | 无符号浮点实数.浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数,可以是数值,

CSS中zoom:1的作用

其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的重叠等. Zoom的使用方法: zoom : normal | number normal : 默认值.使用对象的实际尺寸 number : 百分数 | 无符号浮点实数.浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数,可以是数值,