IE6中浮动的问题

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 div {
 6     width: 100px;
 7     height: 100px;
 8 }
 9 .one {
10     float: left;
11     background: red;
12 }
13 .two {
14     background: green;
15     width: 150px;
16 }
17 </style>
18 <title>demo</title>
19 </head>
20 <body>
21 <div class="one"></div>
22 <div class="two"></div>
23 </body>
24 </html>

chrome&IE8

IE6

可见在IE6中红色div并没有真正“浮动”，而是让后面的绿色div跟随在后面。

解决办法：

　　利用绝对定位。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 div {
 6     width: 100px;
 7     height: 100px;
 8 }
 9 .one {
10     background: red;
11     position: absolute;
12     left: 0;
13     top: 0;
14 }
15 .two {
16     background: green;
17     width: 150px;
18     position: absolute;
19     left: 0;
20     top: 0;
21 }
22 </style>
23 <title>demo</title>
24 </head>
25 <body>
26 <div class="two"></div>
27 <div class="one"></div>
28 </body>
29 </html>

注意：需要将两个div位置调转或调z-index。

chrome&IE8

IE6

posted on 2017-04-11 22:04  B_t  阅读(157)  评论(0)    收藏  举报

导航