如何理解IE下的haslayout属性

最新推荐文章于 2021-02-19 09:36:53 发布

qinchao888

最新推荐文章于 2021-02-19 09:36:53 发布

阅读量382

点赞数

分类专栏： web前端文章标签： web前端

本文链接：https://blog.csdn.net/GreyBearChao/article/details/78372972

版权

web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.首先haslayout属性是针对于IE7、IE6及以下版本，在IE8+中已被废弃。

2.haslayout是IE浏览器引擎的一个组成部分，在IE中，一个元素要么根据自身内容进行布局，要么根据父元素进行布局。

3.如何一个元素的haslayout=“true”，称该属性拥有一个布局，拥有布局的元素会根据自身的内容去调整大小，而非依赖父元素去渲染自己。
反之，如果haslayout = “false”，该元素会依赖于父元素渲染自己。

4.默认拥有布局的元素有：（常见）html body table tr td img input button select textarea 。

5.对于一些元素可能haslayout=“false”，如何触发呢？

注：width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于IE6，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 width 或 height不能在此种情况下令该元素具有 layout。（即在IE5中内联元素也可为其设置宽高）

6.在IE中的某些情况下允许块级元素嵌套在内联元素中，原因是：
内联元素本身触发haslayout属性的情况下再为其设置display：inline，该元素的行为类似于inline-block，其大小可以根据自身内容进行调整。

例：[IE5]
<style>
.div1{
    width: 100px; height: 100px;
}
span{
    border: 1px solid red;overflow:hidden;/*触发haslayout属性*/display:inline;
}
</style>
</head>
<body>
<span><div class="div1">222</div></span>
</body>