掀起了CSS的haslayout属性下的IE浏览器
我们都知道浏览器有bug,IE的bug似乎比大多数浏览器都多,IE的性能不同于其他浏览器的原因之一是,显示引擎使用了一种叫做布局的内部概念。
因为布局是专门针对显示引擎内部工作模式的概念,一般不需要理解它,但是布局问题是许多IE显示错误的根源,所以理解这个概念和它如何影响CSS来修复bug是很有帮助的。
一、什么是haslayout
haslayout是Windows Internet Explorer的渲染引擎内部组件。在Internet Explorer中,布局的概念是用来控制尺寸和元素的位置。在理想情况下,所有的元素都控制自己的大小和位置。然而,这会导致很多的。因此性能问题,IE开发团队决定将布局实际需要的元素,这样的性能可以降低成本。
与布局负责规模和其自己的元素位置的元素,如果元素没有布局,其大小和位置与布局的最近的祖先元素控制。IE显示引擎使用布局的概念,以减少处理开销。一元计算规模和其自己的内容组织,或依赖于父元素的计算规模和组织内容。
为了适应这些不同的两个概念,渲染引擎使用的haslayout属性,可以是真或假。当一个元素的haslayout属性值是真的,我们说这个元素有一个布局(布局)。当一个元素有一个布局,它负责的尺寸计算和自身和后代元素的位置。简单来说,这意味着该元素需要花更多的钱来保护自己和它的内容,而不是依靠祖先元素来完成这些任务。因此,一些元素将默认有一个布局。当我们说一元,有layout或得到layout,或一个元素有layout,我们指的是微软的专有属性haslayout设置为true,布局元素可以是一个元素或元素,默认情况下会布局设置一些CSS属性的布局。如果一个HTML元素haslayout属性,然后hasla价值这个因素你必须真实haslayout是只读属性。一旦被触发,它将是不可逆转的。通过IE开发者工具条,我们可以看到,无论是在伊江的HTML元素haslayout或不。IE开发者工具下,我们haslayout元素,通常显示为;
两。默认的haslayout属性
,
,,
,,,
,,
对haslayout布局三和IE下的触发机制
因此,到这一点,我们需要知道haslayout,为了更好的理解它,然后去寻找解决问题的方法。
首先,我们要知道布局和haslayout属性
布局,意为布局,是IE浏览器下的一个独特概念。它决定了元素的位置和大小,它们的内容,与其他因素相互作用和影响,与用户applications.haslayout是只读属性,不具有布局本身元素的相互作用,如果它的布局是被动触发的是不可逆的。
haslayout,IE的渲染引擎内部组件。在伊江,一元计算的大小和组织内容,计算规模和其内容物,或依赖于父元素的大小来计算和组织内容。为了适应这些不同的两个概念,渲染引擎使用的haslayout属性,可以是真或假。当一个元素的haslayout属性是真实的,我们说的元素有一个布局(布局)。
据不完全统计,默认的HTML标签元素haslyout:,,,,,,,,,,,,,,,,,,,,,,,,,,,,等等。
当一个网页在伊江有一个例外,可以先尝试刺激haslayout确定是否当前集装箱布局不触发。
接下来,我们看看如何激发元素的haslayout属性。以下是孤独园;
1、通过设置CSS属性获取haslayout:显示:,内联块;高度:(汽车;除了任何价值)和浮动:(左或右);位置:,绝对;宽:(除汽车,任何有价值的写作模式:);结核RL;变焦:(除了正常的最小高度:(任意);任意值);和最大高度:(除无,最小宽度:(任意);任意值);和最大宽度:(除了没有溢出:(任意);除可见;任意)和overflow-x:(除可见,overflow-y:(任意);除了可见,位置固定;任何价值);(不完全统计)。
2、内联元素(默认是内联元素,如跨或显示:内联),宽度和高度只有触发haslayout在IE5。X和IE6或更新版本的怪癖模式。IE6,如果运行在标准兼容模式的浏览器(与DOCTYPE模式),内联元素会忽略宽度或高度属性所以,宽度或高度不可命令在这种情况下,布局。
3、变焦可以触发haslayout,但它不支持IE5.0。
4。IE6及更早版本中,常用的方法被称为Holly hack(Holly Hack),即高度:这1%元。需要注意的是,这种方法是无效的,该元素的溢出属性是可见的重要。当这种方法被使用,但没有IE7。在IE6的高度属性实际上是根据最小高度分析了。因此,只要IE6是黑客,* html {身高:1% } 可能引发haslayout无副作用。后来,IE7仍然有许多haslayout问题,但IE7已经能够识别高度正确的属性,身高:1%不再适用。
5。For IE7, the best way is to set the minimum height of the element to be 0px (min-height0;).