hasLayout例子

m:1; 是很不错的触发方法,不会改变原来的任何式样,而且仅仅是IE可以识别,但是唯一的坏处就是他不能通过W3C。

设置 display:inline-block 然后再设置回原始的 display 属性,这样不会移除 layout,我们就可以达到设置 layout 而不使用IE的条件注释的目的。下面是例子:

 

[css] view plaincopyprint?

  1. div { display: inline-block; }   

  2. div { displayblock; } /* 分别在两段 css 块中设置 */   

div { display: inline-block; } 
div { display: block; } /* 分别在两段 css 块中设置 */


 

hasLayout都会引发什么问题? 

1. 浮动元素会被layout元素自动包含。正常情况下,浮动元素会按照left和top的设置偏离原来文档流中的位置,父元素是不会调整高宽去包含该浮动元素的(也就解释了为什么浮动元素不能撑开父容器),但在IE中,layout元素会自动调整高和宽以包含浮动元素(给父容器_height:1%;即可解决)http://blog.csdn.net/hedong37518585/article/details/6639731

 

2.浮动元素旁边的元素。当一个块级元素紧跟在一个左浮动元素之后时,其中的文字内容应该沿着浮动元素的右边顺序排列并会滑到浮动元素下方。但是如果这个块级元素有 layout,那么这个元素就会表现为一个矩形,其中文字不会滑向浮动元素下方。

[html] view plaincopyprint?

  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4. <meta charset="utf-8" />  

  5. <title>IE6 hasLayout 会影响非浮动元素中的文字是否围绕浮动元素</title>  

  6. <style>  

  7. *{  

  8.     margin:0;  

  9.     padding:0;    

  10. }  

  11. .box{  

  12.     width:220px;  

  13.     overflow:auto;  

  14.     font-size:12px;  

  15. }  

  16. .leftbox{  

  17.     background:#CCC;  

  18.     width:100px;  

  19.     height:100px;  

  20.     float:left;  

  21.     *margin-right:-3px; /*针对IE6 浮动元素水平右外边距移动-3px 即可解决*/  

  22. }  

  23. .textbox{  

  24.     background:#FFCCCC;  

  25.     height:1%;/*去掉后 IE6下 文字不会再围绕浮动*/  

  26. }  

  27. </style>  

  28. </head>  

  29.   

  30. <body>  

  31. <div class="box">  

  32.     <div class="leftbox">浮动元素</div><p class="textbox">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>  

  33. </div>  

  34. </body>  

  35. </html>  

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IE6 hasLayout 会影响非浮动元素中的文字是否围绕浮动元素</title>
<style>
*{
	margin:0;
	padding:0;	
}
.box{
	width:220px;
	overflow:auto;
	font-size:12px;
}
.leftbox{
	background:#CCC;
	width:100px;
	height:100px;
	float:left;
	*margin-right:-3px; /*针对IE6 浮动元素水平右外边距移动-3px 即可解决*/
}
.textbox{
	background:#FFCCCC;
	height:1%;/*去掉后 IE6下 文字不会再围绕浮动*/
}
</style>
</head>

<body>
<div class="box">
	<div class="leftbox">浮动元素</div><p class="textbox">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
</div>
</body>
</html>

 

3. IE专有的滤镜属性filter是只适用于 layout 元素的,也就是说如果你给一个DIV设置透明用的是filter:alpha(opacity=80);如果你没有让DIV触发hasLayout,那么这个透明将无效

[html] view plaincopyprint?

  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4. <meta charset="utf-8" />  

  5. <title>IE6 filter透明滤镜 需要触发该元素的hasLayout</title>  

  6. <style>  

  7. *{  

  8.     margin:0;  

  9.     padding:0;    

  10. }  

  11. body{  

  12.     background:#000;  

  13.     font-size:12px;  

  14. }  

  15. .textbox{  

  16.     background:#FFCCCC;  

  17.     opacity:0.8;  

  18.     filter:alpha(opacity=80);  

  19.     zoom:1;  

  20. }  

  21. </style>  

  22. </head>  

  23.   

  24. <body>  

  25. <div class="textbox">文本文本文本文本文本文本文本文本文本本文本文本文本文本文本文本文本文本文本文文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div>  

  26. </body>  

  27. </html>  

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IE6 filter透明滤镜 需要触发该元素的hasLayout</title>
<style>
*{
	margin:0;
	padding:0;	
}
body{
	background:#000;
	font-size:12px;
}
.textbox{
	background:#FFCCCC;
	opacity:0.8;
	filter:alpha(opacity=80);
	zoom:1;
}
</style>
</head>

<body>
<div class="textbox">文本文本文本文本文本文本文本文本文本本文本文本文本文本文本文本文本文本文本文文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div>
</body>
</html>

 

4. hasLayout 会影响一个块级别链接的鼠标响应区域(可点击区域)。通常 hasLayout=false 时只有文字覆盖区域才能响应。而 hasLayout = true 则整个块状区域都可响应。

[html] view plaincopyprint?

  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4. <meta charset="utf-8" />  

  5. <title>IE6 hasLayout影响块元素鼠标响应区域</title>  

  6. <style>  

  7. *{  

  8.     margin:0;  

  9.     padding:0;    

  10. }  

  11. div{  

  12.     width:100px;  

  13.     height:50px;  

  14.     background:#FF0000;  

  15. }  

  16. a{    

  17.     display:block;  

  18.     height:1%;/*去掉后就不具有Layout布局 则只有文字覆盖区域以响应*/  

  19. }  

  20. </style>  

  21. </head>  

  22.   

  23. <body>  

  24. <div>  

  25. <a id="my" href="javascript:;">click me</a>  

  26. </div>  

  27. </body>  

  28. </html>  

你可能感兴趣的:(hasLayout例子)