IE6 Bugs(四)

一、页面例子

1. .demo-outer {
2.     border: 3px dashed black;
3.     /*这项样式属性可以同时指定三种不同的元素边框属性
4.     border-color,border-width,border-style*/
5.     padding: 8px;/*这项样式属性定义元素上、右、下、左的内缘宽度*/
6. }
7. .demo-inner {
8.     border: 3px solid black;
9.     padding: 0 8px 8px 8px;
10. }
11. .demo1 {
12.     border: 1px solid black;
13.     margin-top: 8px;
14. }
15. .demo2 {
16.     border: 1px solid blue;
17.     margin-top: -1px;
18. }
19. .demo-outer p {
20.     margin-bottom: 0;
21. }
22. <div class="demo-outer">
23.     <div class="demo-inner">
24.         <div class="demo1">
25.             This is a &lt;div&gt; with a border and a positive top margin.
26.         </div>
27.         <div class="demo2">
28.             This is a &lt;div&gt; with a border and a negative top margin.
29.         </div>
30.         <div class="demo1">
31.             This is a &lt;div&gt; with a border and a positive top margin.
32.         </div>
33.         <div class="demo2">
34.             This is a &lt;div&gt; with a border and a negative top margin.
35.         </div>
36.     </div>
37.     <p>This is a &lt;p&gt; that does <strong>not</strong> have a border.</p>
38. </div>

二、分析解决

有两个连接的块级元素，第二个设置了负的margin-top或margin-bottom，并设置了border，则显示不正确。

解决方法：给相应窗口及元素设置hasLayout属性。

 

 

三、修改后的源码

1. .demo-outer {
2.     border: 3px dashed black;
3.     /*这项样式属性可以同时指定三种不同的元素边框属性
4.     border-color,border-width,border-style*/
5.     padding: 8px;/*这项样式属性定义元素上、右、下、左的内缘宽度*/
6. }
7. .demo-inner {
8.     border: 3px solid black;
9.     padding: 0 8px 8px 8px;
10.     zoom:1;
11. }
12. .demo1 {
13.     border: 1px solid black;
14.     margin-top: 8px;
15. }
16. .demo2 {
17.     border: 1px solid blue;
18.     margin-top: -1px;
19.     zoom:1;
20. }
21. .demo-outer p {
22.     margin-bottom: 0;
23. }
24. <div class="demo-outer">
25.     <div class="demo-inner">
26.         <div class="demo1">
27.             This is a &lt;div&gt; with a border and a positive top margin.
28.         </div>
29.         <div class="demo2">
30.             This is a &lt;div&gt; with a border and a negative top margin.
31.         </div>
32.         <div class="demo1">
33.             This is a &lt;div&gt; with a border and a positive top margin.
34.         </div>
35.         <div class="demo2">
36.             This is a &lt;div&gt; with a border and a negative top margin.
37.         </div>
38.     </div>
39.     <p>This is a &lt;p&gt; that does <strong>not</strong> have a border.</p>
40. </div>