理解haslayout
定义:
haslayout是IE7-浏览器的特有属性。hasLayout是一种只读属性,有两种状态:true或false。 当其为true时,代表该元素有自己的布局,否则代表该元素的布局继承于父元素。
[注意]通过element.currentStyle.hasLayout可以得出当前元素的hasLayout情况
HTML标签:
默认触发hasLayout的有如下HTML标签:
【1】html,body
【2】table,tr,th,td
【3】img
【4】hr
【5】input,button,select,textarea,fieldset
【6】frameset,frame,iframe
CSS属性:
可以触发hasLayout的有如下CSS属性:【1】display:inline-block
【2】height/width:除了auto
【3】float:left/right
【4】position:absolute
【5】writing-mode(IE专有属性,设置文本的垂直显示):tb-rl
【6】zoom(IE专有属性,设置或检索对象的缩放比例):除了normal**IE7专有的触发hasLayout的CSS属性**
【1】min-height/max-height/min-width/max-width:除none
【2】overflow\overflow-x\overflow-y:除visible
【3】position:fixed
用途:
【1】解决IE7-浏览器下父级边框不阻止子级上下margin传递的bug
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{margin: 0;
}
ul{margin: 0;padding: 0;list-style: none;
}
.list{border: 10px solid black;background-color: red;/*触发hasLayout*//*float:left;*/
}
.in{height: 100px;width: 100px;margin-top: 50px;background-color: blue;
}
</style>
</head>
<body>
<ul class="list"><li class="in"></li>
</ul>
</body>
</html>
【2】配合display:inline让块元素模拟inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{margin: 0;
}
.box{width: 100px;height: 100px;background-color: red;display:inline-block;/*配合display:inline触发hasLayout*//* float:left;display:inline; */
}
</style>
</head>
<body>
<div class="box" id="box"></div><span>测试inline-block用</span>
</body>
</html>
【3】解决在IE7-浏览器下LI4px空隙bug(IE7-浏览器下li有高度或宽度或zoom:1,且仅包含内联元素,且内联元素被设置为display:block,li下会多出3px的垂直间距)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{margin: 0;
}
ul{margin: 0;padding: 0;list-style: none;
}
.list{width: 200px;background-color: lightgreen;
}
.in{height: 100px;background-color: lightblue;
}
.span{display: block;zoom:1;
}
</style>
</head>
<body>
<ul class="list"><li class="in"><span class="span">1231</span></li><li class="in"><span class="span">1232</span></li>
</ul>
</body>
</html>
【4】触发浮动元素的父级的hasLayout,浮动元素会被layout元素自动包含,相当于IE7-浏览器下实现清浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{margin: 0;
}
ul{margin: 0;padding: 0;list-style: none;
}
.list{background-color: lightgreen;height: 200px;
}.in{float: left;width: 100px;height: 100px;border: 1px solid black;background-color: lightblue;
}
.test{width: 100px;height: 150px;background-color: yellow;
}
</style>
</head>
<body>
<ul class="list"><li class="in"></li><li class="in"></li>
</ul>
<div class="test">测试浮动</div>
</body>
</html>
理解haslayout相关推荐
- CSS魔法堂:hasLayout原来是这样!
前言 过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的,那就是hasLayout.趁着最近突然发神经打算好好学习CSS,顺便解答多年来的疑惑. hasLayout到底是何方神圣? hasL ...
- hasLayout引发的CSS Bug表 及处理办法【zoom:1】
文章一 : 解决IE兼容问题是比较头疼的问题,无论你是新入门的菜鸟还是久经考验的职业行家,兼容问题,特别是IE,IE6会让你非常头疼.很多时候,div CSS在IE下的解析十分奇怪,一个比较经典的bu ...
- 浅谈 css的zoom属性
zoom这个属性是ie专有属性,除了设置或者检索对象的缩放比例之外,它还有可以触发ie的haslayout属性,清除浮动,清除margin重叠等作用. 不过值得注意的一点就是火狐浏览器不支持zoom属 ...
- css中zoom的用法
zoom这个属性是ie专有属性,除了设置或者检索对象的缩放比例之外,它还有可以触发ie的haslayout属性,清除浮动,清除margin重叠等作用. 不过值得注意的一点就是火狐浏览器不支持zoom属 ...
- html中zoom方法,css中的zoom的作用
原标题:css中的zoom的作用 小标签大用处,今天重庆IT培训www.ztxuexi.cn就给大家说说css中的zoom的作用 : 1.检查页面的标签是否闭合 不要小看这条,也许折腾了你两天都没有解 ...
- [前端基础] CSS3 篇
CSS3 使用了层叠样式表技术,可以对网页布局.字体.颜色.背景灯效果做出控制.CSS3 作为 CSS 的进阶版,拆分和增加了盒子模型.列表模块.语言模块 .背景边框 .文字特效 .多栏布局等等.CS ...
- 浏览器兼容性笔记(转)
ie下层的最小高度为十七八px所以十七八px以下的高度ie6会自动按照十七八计算,可以通过设置overflow :hidden来解决: 层的居中显示: margin-left:auto; mar ...
- CSS中zoom属性的作用
这里介绍一下CSS中的Zoom属性,这个属性一般不为人知,甚至有些CSS手册中都查询不到.但经常会在一些css样式中看到它出现. Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可 ...
- 小米前端实习面试题和一些经验
前两天接到了小米的面试邀请,在此之前有个电面,自认为已经初步对小米对前端实习生的要求了解了大概,然后没做过多心里建设准备就去了.(画外音:到了小米,正好赶上当天有许多新员工入职,大厅看起来比较忙碌,拿 ...
最新文章
- IPsec ××× 配置實例
- numpy 修改数据类型
- 服务器项目带文件名,tomcat服务器上webapps里的文件名和项目名称不一样,修改方法...
- 用脑机接口创作音乐,将音乐与思想进行合成
- 宝塔执行sh文件_宝塔面板未授权访问
- mybatis plus 链式编程查询
- Centos7更换阿里云yum源
- 26_多线程_第26天(Thread、线程创建、线程池)_讲义
- paip.C#.NET JSON解析总结
- sql server序列_SQL Server中的Microsoft时间序列
- 使用Delphi编写棋牌类游戏 – 设计篇(3)
- php-mvc模式(2)
- 算法导论 资源 课后答案 PDF
- 《Google软件测试之道》三、好的经验沉淀
- 黑盒测试 之 因果图法
- 企业运维之服务管理 -- supervisord
- 服务器appcrash的问题怎么修复,Win7系统出现APPCRASH错误的修复方法
- 高考30条干货分享!去哪能找到高质量2021高考学习资源?
- 在金山云上,“雷布斯”有这些野心
- USB输入单节锂电池0.5A充电管理IC,防高压40V保护电路-7号电路板