完美解决浮动IE6 7中的兼容性BUG问题

想要创建出漂亮的网页设计，除了要认真学习每一个html和CSS代码之外，不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气，因为你本来写出的规规矩矩的代码，漂亮的设计就此就要完成了，却发现呈现出的效果压根不是你所期望的那样，漂亮的布局被破坏的体无完肤。更可气的是当你查找一遍代码中的错误时，却压根找不出来。这时候你就迫切需要了解一下IE6和它的那些同伙的坏脾气了，因为很可能它们就是罪魁祸首。到底IE6的那几个家伙们到底是如何搞乱你的设计的？咱们双该如何解决呢，别急，请听我慢慢道来：

1.在IE 6 7 元素浮动要并在同一行都要加浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ie双边距问题</title>
</head>
<style>
    .left{width: 100px;height: 300px;background: red;float: left;}
    .box{width: 400px;}
            
    .right{width: 300px;float: left;}
</style>
<body>
    <div class="box">
        <div class="left"></div>
<!--在IE 6 7 元素浮动要并在同一行都要加浮动*--->
        <div class="right">
              想要创建出漂亮的网页设计，除了要认真学习每一个html和CSS代码之外，不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气，因为你本来写出的规规矩矩的代码，漂亮的设计就此就要完成了，却发现呈现出的效果压根不是你所期望的那样，漂亮的布局被破坏的体无完肤。更可气的是当你查找一遍代码中的错误时，却压根找不出来。这时候你就迫切需要了解一下IE6和它的那些同伙的坏脾气了，因为很可能它们就是罪魁祸首。到底IE6的那几个家伙们到底是如何搞乱你的设计的？咱们双该如何解决呢，别急，请听我慢慢道来：
        </div>
    </div>
</body>
</html>

不加浮动的话在ie67 下会有3px如图：

所以在在IE 6 7 元素浮动要并在同一行都要加浮动

一：IE6、 7下双边距Bug

一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left) 来令它和容器的左边产生一段距离。看起来相当的简单，对吗？但直至它被在IE/Win中浏览为止，在浏览器中居左浮动元素的边界长度被神秘地翻了一倍！

先来看一下图片：

在下面的实验中，我们要让这个绿色的盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。要实现这样的效果，我们给绿色盒模型应用以下CSS属性：

以下为引用的内容：
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*外边距的最后一个值保证了100像素的距离*/
}

看起来是很简单的吧？但是当我们在IE6中查看时，却会发现左侧外边距100像素，被扩大到200个像素。如下图：

二：该如何来修正这个Bug？

这个修正其实很简单，只需要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单？对，就这么简单。如下图：

CSS代码如下：

以下为引用的内容：
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}

例子：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 body{margin:0;}
 8 .wrap{float:left;border:2px solid #000;}
 9 .box{width:100px;height:100px;background:red;margin:0 100px;float:left; }
10 /*
11     IE6下的双边距BUG
12     在IE6下，块元素有浮动和横向margin的时候，横向的margin值会被放大成两倍
13     
14     解决办法: display:inline;
15 */
16 </style>
17 </head>
18 <body>
19 <div class="wrap">
20 <div class="box"></div>
21 </div>
22 </body>
23 </html>

以上方法是我在网页设计中总结出来并不断实践过的方法，希望能让浏览到这篇文章喜欢学习的兄弟姐妹受益！

一：IE6、 7下IE67下li的4px间隙

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 .list{ width:300px;margin:0;padding:0;}
 8 .list li{ list-style:none;height:30px;border:1px solid #000; font-size:12px; line-height:30px; vertical-align:top;}
 9 .list a{float:left;}
10 .list span{float:right;}
11 /*
12     IE6，7下li的间隙
13     
14     在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生几px的间隙
15     
16     解决办法: 1.给li加浮动
17         2.给li加vertical-align:top;
18 */
19 </style>
20 </head>
21 <body>
22 <ul class="list">
23     <li>
24         <a href="#">文字文字文字文字文字</a>
25         <span>作者</span>
26     </li>
27     <li>
28         <a href="#">文字文字文字文字文字</a>
29         <span>作者</span>
30     </li>
31     <li>
32         <a href="#">文字文字文字文字文字</a>
33         <span>作者</span>
34     </li>
35     <li>
36         <a href="#">文字文字文字文字文字</a>
37         <span>作者</span>
38     </li>
39 </ul>
40 </body>
41 </html>

vertical-align 清除掉边距问题

三：IE6、 7下最小高度

　　使用font-size:0;或overflow：hidden；

完美解决浮动IE6 7中的兼容性BUG问题

相关推荐