在专有的CSS属性haslayoutIE浏览器的深度分析
haslayout有很多相似之处的,但haslayout概念更易于理解。在互联网浏览器,元素与布局;的概念来控制的大小和位置、布局和布局已不分为两种,大小和定位元件的布局是由本身和它的元素的控制,没有布局元素将通过父元素(布局最近的祖先)控制的大小和位置,以及是否有一个元素的haslayout属性告诉浏览器的布局,它是一个布尔变量,真是布局元素,虚假的布局元素不具有代表性。总之,haslayout只有一个专有的属性在IE浏览器,和元素W随着haslayout真正赋予它一系列效应。
特别注意的是事实,haslayout被遗弃在IE 8和后来的IE版本,所以在现实的发展,有必要引起一些在IE 8浏览器元素haslayout。
对haslayout元素会影响大小和元素的触发位置,它会消耗更多的资源,所以默认的IE设计师只对haslayout元素部分(这是默认的触发元件部分将触发haslayout,和BFC完全由开发商通过特定的CSS触发器是不一样的,这部分的元)以下:
体和HTML
表,TR,TH,TD
IMG
人力资源
输入按钮,文件,选择文本,字段集
跑马灯
框架,框架,iframe
对象、小程序、嵌入
两。如何触发haslayout
除了IE的默认触发元件haslayout,Web开发人员也可以使用特定的CSS触发元件的haslayout。
通过设置以下任何CSS的元素,你可以触发haslayout(即该元素的haslayout属性设置为true)。
浮子:(左或右)
位置:绝对的
显示:内联块
宽度:(除汽车以外的任何值)
高度:(除汽车以外的任何值)
写入模式:TB
缩放:(除了正常数字以外的任何数字,包括1的效果相当于正常)
In addition, some CSS can also trigger hasLayout under IE 7.
最小宽度:(任意值包括0)
马克斯宽度:(除无任意值)
最小高度:(任意值包括0)
马克斯高度:(除无任意值外)
除可见(隐藏、自动、滚动)溢出的值。
位置:固定
对于内联元素(可以认为是默认浏览器span元素,内联元素也可以设置显示的宽度和高度:内联元素)可以触发只有在IE5和IE6或元素。X的haslayout的怪癖模式更新的版本,但对于IE6,如果浏览器的标准兼容模式运行,内联元素会忽略宽度或高度属性,所以设置宽度或高度不可为了触发haslayout元素。但变焦总是能够触发除了IE 5 haslayout。变焦是用来设置或检索元素的缩放比例。设置缩放:1元素可以触发haslayout元素没有造成不必要的影响因素。因此,考虑到浏览器对元素的影响之间的相容性,Kayo建议使用变焦:1触发元件的haslayout。
三。haslayout触发效果
虽然haslayout希望BFC影响的大小和位置的元素,但它不是一个完整的一套标准,因为只有一些元素的默认触发,这导致很多前端开发下的IE漏洞,引发haslayout更是解决一些IE漏洞,而不是利用它的一些副作用;为了达到一定的效果。另外,由于触发haslayout元素会出现一些触发BFC元素类似的效果,所以为了表达伊江元素与BFC浏览器支持统一,Kayo建议触发和触发haslayout BFC的元素,当然,也需要考虑到实际情况,可能只有其中一个可以触发为了达到团结的效果,下面将介绍。
在这里,首先,列出一些触发haslayout元素的影响:
1。防止外缘折叠
两个div是叠加在垂直的外缘,而触发的haslayout不会发生这样的元素,如下:
在上面的例子中,三个div包含一个P元素,和三个div和P元素包含顶部和底部之间的外部距离,但只有第三分利润并不折叠它的子元素P,这是因为第三DIV使用变焦的外缘:1触发haslayout并防止其折叠出其子元素的外部距离。
此外,溢流型隐藏触发元件也使用的例子,它利用BFC预防外从动件实现的统一表达伊江元素和现代浏览器。
2。可以包含一个浮动的子元素,包括浮动的子元素时的计算高度计算。
结果如下:
在上面的例子中,有两个div,每个包含一个浮动元素P,但第一个div实际上是判断浏览器,它没有高度和宽度,即高度为0,与上、下边界重叠在一起,二div使用变焦:1触发haslayout,它可以包含一个浮动元素,所以它可以正确显示的高度,和它的边缘位置是正常的。
此示例还使用溢出:隐藏触发BFC,类似的情况下,允许使用可以包含子元素特征浮动元素集成在伊江和现代浏览器。
三.背景图像显示问题
背景元素不能正确显示是一个重建最常见的问题,在IE 7及以下版本的IE,元素的高度和宽度设置不经常不能显示背景图像(背景颜色是正常的,这实际上是有关haslayout)。事实上没有元素触发haslayout不能显示背景图。如上所述,触发haslayout是元素使布局。换句话说,带有布局的元素可以正确显示背景图:
两部以上的所有设置背景图,但只有变焦的使用:1触发的haslayout二div正确显示背景图。
在这个例子中,没有BFC触发的元素,因为在现代浏览器中,元素本身没有背景图显示。
可以看出,上述第一、第二的例子,为了使元素在IE(包括IE版本低,IE的更新版本)和现代浏览器性能统一,引发haslayout和BFC,和第三个例子的问题,因为只有在低版本的IE,所以就像低版本的IE触发haslayout,这些技术需要特别注意在实际项目。
这也是说,haslayout是事实上的许多即显示相关的缺陷,很多莫名其妙的错误都是由haslayout。因此,只要适当的触发因素是haslayout,很多IE漏洞是可以解决的。Kayo在这里列出了几个例子:
IE 6和浮动元素的低版本双边距设置错误显示:内联元素可以被解决。
即5-6的3像素偏移错误设置_height:1%元可以解决的