CSS基础篇--CSS中IE浏览器的hasLayout,IE低版本的bug根源

什么是hasLayout?

hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时,它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作。

哪些元素默认有hasLayout属性

在IE浏览器中下列默认hasLayout=true的元素
<table> <td> <body> <img> <hr> <input> <select> <textarea> <button> <iframe> <embed> <object> <applet> <marquee>

很多情况下,我们把 hasLayout的状态改成true 就可以解决很大部分ie下显示的bug
这儿所示的bug一般指的是IE7以及以下的浏览器。

如何设置haslayout?

下面列出可以触发hasLayout的一些CSS属性值。

  • position: absolute (取消使用:static)
  • float: left or right(取消使用:none)
  • display: inline-block (取消使用:其它值)
  • width: 除了auto以外的值(取消使用:auto)
  • height: 除了auto以外的值(取消使用:auto)
  • zoom: 有值(取消使用:normal或者空值)

ie7还有一些额外的属性可以触发该属性(不完全列表):

  • min-height: (网上查看说是任何值,但实践发现还是除了none与auto)
  • max-height: (任何值除了none与auto)
  • min-width: (网上查看说是任何值,但实践发现还是除了none与auto)
  • max-width: (任何值除了none与auto)
  • overflow: (任何值除了visible)
  • overflow-x: (任何值除了visible)
  • overflow-y: (任何值除了visible)
  • position: fixed

js测试一个元素是否有layout

<div id="menu" onclick="javascript:alert(menu.currentStyle.hasLayout)">这个是文本内容</div>

在IE浏览器中点击这个ID为menu的DOM元素,如果元素有layout,那么弹出来的结果是true,否则为false

举例

1.当一个元素内含浮动或绝对定位的内容时,它通常会表现出奇怪和错误的行为,看下面的代码:
html:

<div id="nofloatbox">
    <div id="floatbox"></div>
</div>

css:

#nofloatbox {
    border: 1px solid #FF0000;
    background: #CCC;
    zoom:1;
}
#floatbox {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid #0000FF;
    background: #00FF00;
}

IE浏览器得到的结果如图所示:
图片描述

可见无浮动的div并没有被里面的浮动元素的高度撑开,其高度并不会自动计算。我们下面再给这个无浮动的div加上个zoom:1;来触发其hasLayout属性试试,css代码如下:

#nofloatbox {
    border: 1px solid #FF0000;
    background: #CCC;
    zoom:1;
}

在IE7以及低版本浏览器得到的结果如图:
图片描述

那么其它标准浏览器就相当于清除子元素的浮动就可以,在父元素中添加overflow:hidden就可以。

2.hasLayout对于内联元素也可以有效果,当内联元素的hasLayout为true的时候,可以给这个内联元素设定高度和宽度并得到期望的效果,(这儿是指IE7以及低版本浏览器)如下例:

<p>今天的<span style="width: 100px; height: 50px; background: #DDD;">天气</span>真好</p>

浏览器的效果如图所示:
图片描述

下面给span加上zoom: 1;来触发hasLayout:

<p>今天的<span style="width: 100px; height: 50px; background: #DDD;zoom:1">天气</span>真好</p>

在IE7浏览器中的效果如图所示:
图片描述

注意:要注意的是,hasLayout是微软专有的东西,对firefox,Chrome等比较遵守标准的浏览器就无效了,因此不可太过依赖。其实依据合理的语义化,恰当的文档流,正确的标准化所生产出来的页面,在各个公司出品的标准渲染的浏览器下,一般并不会存在太多兼容性的问题的。


风雨过后见彩虹
对web前端的爱好与兴趣而来,收集、发表有意义的文章随笔问题,让知识沉淀积累,方便自己查阅,方便网友...
9k 声望
1.1k 粉丝
0 条评论
推荐阅读
web前端常用的五种方式搭建本地静态html页面服务器
方式一:live-serverlive-server是一款npm工具,可以在项目目录启动一个node服务,然后直接在浏览器中预览,并且自动全局监听实时更新。两种安装方式: {代码...} 直接使用live-server首先在项目下npm初始化:npm ...

风雨后见彩虹5阅读 10.7k评论 1

【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan21阅读 1.6k评论 1

封面图
那些不用js也能实现的效果
本文首发于公众号:GitWeb,欢迎关注,接收首发推文本文列举几个不需要使用js也能实现的效果一、页面回到顶部回到顶部是页面开发中很常见的一个功能,一般的做法是对回到顶部组件做一个监听,当用户点击的时候,...

Winn11阅读 1.1k评论 6

封面图
Three.js 进阶之旅:全景漫游-初阶移动相机版
3D 全景技术可以实现日常生活中的很多功能需求,比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js 实现全景功能也是十分方便的,当然了目前已经有很多...

dragonir12阅读 1.4k

封面图
巧用 CSS 变量,实现动画函数复用,制作高级感拉满的网格动画
这里我们借助了上面 #12、结构性伪类 中的 :root{ } 伪类,在全局 :root{ } 伪类中定义了一个 CSS 变量,取名为 --bgColor 。

chokcoco11阅读 2.9k

封面图
突发奇想!借助CSS自定义彩色字体来实现多行文本展开收起
之前写过这样一篇文章:CSS 实现多行文本“展开收起”,介绍了一些纯 CSS 实现多行文本展开收起的小技巧,特别是右下角的“展开收起”按钮,用到了浮动布局,非常巧妙,有兴趣的可以回顾一下。

XboxYan9阅读 1.2k

封面图
9k 声望
1.1k 粉丝
宣传栏