IE6与IE7的显示引擎均引用Layout布局的概念，因此有了很多的bug，其中IE7虽然也是采用布局概念，但在IE6的基础上修复了很多很多的bug。以下是对IE6的常见bug的收集。
拥有布局元素包括：
/body/html(标准文档中)/table/tr/td/img/hr/input/select/textarea/button/iframe/embed/object/applet/marquee
查看元素是否拥有布局：JS函数hasLayout。
设置以下css属性会自动地使元素拥有布局：
/float:left|right./display:inline-block./width/height/zoom/writing-mode:rb-rl
在IE7中，以下属性也成了布局触发器：
/overflow:（hidden/scroll/auto）/min-width/max-width:除none之外的任何值
1 .promo1的float+.promo2的height属性（或者其它拥有布局的属性设置）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8"/>
5 <title></title>
6 <style type="text/css">
7 .promo1{
8 float:left;
9 width:300px;
10 height:200px;
11 border:1px solid red;
12 }
13 .promo2{
14 height:300px;
15 border:1px solid green;
16 }
17 </style>
18 </head>
19 <body>
20 <div class="promo1">1111111this is a 1111111this is a 111this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph. is a paragraph.1111this is a 1111111this is a .1111111this is a paragraph.1111111this is a paragraph.</div>
21 <p class="promo2">this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is his is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is his is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.</p>
22 </body>
23 </html>
在IE中的显示：
2 元素的内容（不管里面是很长的一个单词，还是图片）宽度比设置的width属性值要大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
.promo1{
width:20px;
height:200px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="promo1">1111111111111111111111111111111111111111111111111111111111111paragraph.</div>
</body>
</html>
在IE中的显示效果
3 拥有布局的元素不会收缩
4 布局元素对浮动进行自动清理（例设置zoom:1）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8"/>
5 <title></title>
6 <style type="text/css">
7 .promo1{
8 zoom:1;
9 border:1px solid blue;
10 }
11 .promo2{
12 float:left;
13 border:1px solid red;
14 }
15
16 </style>
17 </head>
18 <body>
19 <div class="promo1">
20 <div class="promo2">1111111111111111111111111111111111111111111111111111111111111paragraph.</div>
21 </div>
22
23
24 </body>
25 </html>
5 相对定位的元素没有布局
6 在拥有而已的元素之间外边距不叠加
7 在没有布局的块级链接上，单击区域只覆盖文本
8 在流动时，列表项上的背景图像间歇性地显示和消失
时间： 2024-12-26 08:56:44