zoukankan      html  css  js  c++  java
  • 你必须知道IE中的hasLayout

    在IE中,有一个很重要的概念,这个概念,对 IE 中页面元素的布局有影响。这就是 hasLayout。可能很多人都不知道它的存在吧,但是它却偷偷的做了那么多坏事。
    虽然如此,MSDN 中涉及到 hasLayout 这个 MS 属性的地方寥寥无几,而具体解释 layout 和 IE 渲染模型之间关系的则少之又少。
    hasLayout 就是一把双刃剑,对 IE 的布局很重要,而同时,在 IE 中引起了很多 bug,比如浮动双边距bug等。

    它是很多兼容性问题的罪魁祸首。

    IE专有的Layout
    hasLayout的字面意思是 “拥有布局”。在说明 hasLayout 之前,需要先说明一个跟它相关的概念--”Layout”,也就是“布局”。
    "Layout"是IE/Win的专有概念,它决定了元素如何对其内容进行定位和尺寸计算,与其他元素的关系和相互作用,以及对应用还有使用者的影响。
    "Layout"可以被某些CSS特性(property)不可逆的触发,而某些HTML元素本身就具有layout。
    "Layout"在IE/Win中通过 hasLayout 属性来判断一个元素是否拥有layout。

    hasLayout属性

    hasLayout 是IE浏览器渲染引擎的一个内部组成部分。在IE浏览器中,一个元素要么自己对自身的内容进行组织和计算大小,要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾,渲染引擎采用了 hasLayout的属性,属性值可以为true或false。
    当一个元素的 hasLayout 属性值为 true 时,我们说这个元素有一个布局(layout),或拥有布局。

    从何而来

    默认 hasLayout 的元素:

    可触发hasLayout的CSS特性:

    Internet Explorer 7 还有一些额外的属性(不完全列表)可以触发hasLayout:


    另外注意,IE6以前的版本(也包括IE6及以后所有版本的混杂模式,其实这种混杂模式在渲染方面就相当于IE5.5),通过设置任何元素的 width/height(非auto)都可以触发hasLayout。但在IE6/IE7的标准模式中的行内元素上却不行,设置 display:inline-block才可以。

    hasLayout与Block formatting contexts
    在IE中,触发hasLayout的元素,与W3C标准中创建了 Block Formatting contexts存在很多相似之处,都能包含浮动元素,都会阻止margin折叠等等,后续会详细的介绍。

    hasLayout会影响IE中 offsetParent 对象的判定
    在 IE中,有些情况下,某个元素的offsetParent 是离他最近的hasLayout的元素。详细的见 跨浏览器开发 中的帖子:【分享】深入挖掘 offsetParant 元素的判定

    触发 hasLayout 的元素的高度计算可能会有问题
    空的高度为 auto 的元素,计算后的高度应该是0,但是在IE中,触发hasLayout后,高度不为0,后续会详细的介绍。

    触发 hasLayout 会影响 P 等元素的浏览器默认 margin 值
    ……

    总之,hasLayout 还引起了很多其他的问题,在此处不再一一说明。

  • 相关阅读:
    常见的 常见的 User_Agent
    scp 传送数据的几种方式
    最近面试的几个问题 (三) io 多路复用
    mac 磁盘分区 时间胶囊创建失败
    最近面试的几个问题 (二) request_url 去重之布隆去重
    最近面试的几个问题 (一) 进程和线程、协程的区别
    chromedriver与chrome最新版本对应表 转自-河岸上的酸菜鱼 简书地址-https://www.jianshu.com/u/bbea92f78aca
    Sql代码美化工具:Sql Pretty Printer for SSMS V3.6.1
    如何给非理科生讲明白什么是云计算、大数椐(下)
    如何给非理科生讲明白什么是云计算、大数椐(上)
  • 原文地址:https://www.cnblogs.com/rhinemetal/p/2568444.html
Copyright © 2011-2022 走看看