IE6下css常见bug处理

1、双倍边距

如下图所示，一个样式里面既设定了“float：left；”又有“margin-left：100px；”的情况，就呈现了双倍情况。如外边距设置为100px， 而左侧则呈现出200px，解决它的方法是在浮动元素上加上display:inline;的样式，或者尽量少用这种形式，这样就可避免双倍边距bug。      

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style>
 6         .box{
 7             background: rosybrown;
 8             width:100px;
 9             height:200px;
10             float: left;
11             margin-left: 100px;
12             display: inline;
13         }
14     </style>
15 </head>
16 <body>
17 <div class="box">
18 </div>
19 </body>
20 </html>

显示的结果如下：

              添加display：inline                                                                      不添加display:inline时                                           

                                 

2、3像素问题

问题：2列布局。左列固定，右列液态

当使用float浮动容器后，在IE6下会产生3px的空隙，有意思的是右侧容器没设置高度时3px在右侧容器内部，当设定高度后又跑到容器的左侧了。解决方法有几种，对于网上非常流行的给右侧div增加margin-right: -3px，大大增加了布局的复杂度并且如果父div有设置浮动的话就会失效，解决方法：可以同样给右侧设置左浮动。(还有其他方法)

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

在FF下：两个div内容重合了                                                        ie6下：出现了中间3px的缝隙

                        

 设置right部分float:left之后：

FF下

                          

 ie6下

 3、超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: L-V-H-A（一般现在只用hover就可以了）
        a:link {color:blue; text-decoration:none;}
        a:visited {color:aqua;text-decoration:none;}
        a:hover {color:green; text-decoration:underline;}
        a:active {color:red;}

4、li在ie中底部3像素的bug

    IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style>
 6         .waibu{
 7             background: #4386d4;
 8             color:#000;
 9             width:401px;
10             height:200px;
11             position: relative;
12 
13         }
14         .libu{
15             background: red;
16             color:#ffffff;
17             width:100px;
18             height:100px;
19             top:0px;
20             right:0px;
21            position: absolute;
22         }
23 
24     </style>
25 </head>
26 <body>
27 
28 <div class="waibu">
29     background: #4386d4;
30     color:#ffffff;
31     width:400px;
32     height:200px;
33     <div class="libu">
34         background: red;
35         color:#ffffff;
36         width:100px;
37         height:100px;
38         vertical-align: middle;
39     </div>
40 </div>
41 
42 </body>
43 </html>
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style>
 6         .waibu{
 7             background: #4386d4;
 8             color:#000;
 9             width:401px;
10             height:200px;
11             position: relative;
12 
13         }
14         .libu{
15             background: red;
16             color:#ffffff;
17             width:100px;
18             height:100px;
19             top:0px;
20             right:0px;
21            position: absolute;
22         }
23 
24     </style>
25 </head>
26 <body>
27 
28 <div class="waibu">
29     background: #4386d4;
30     color:#ffffff;
31     width:400px;
32     height:200px;
33     <div class="libu">
34         background: red;
35         color:#ffffff;
36         width:100px;
37         height:100px;
38         vertical-align: middle;
39     </div>
40 </div>
41 
42 </body>
43 </html>

在FF中：                                                                                                                                            ie6下：

                                    

将外层的宽度改为400偶数后，ie6下的效果如图所示：

  

5、IE6下为什么图片下方有空隙产生

解决这个BUG的方法也有很多，可以是改变html的排版，或者定义img 为display:block
或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
还可以设置父容器的字体大小为零，font-size:0

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style>
 6 body{
 7     background:tan;
 8 }
 9         img{
10 
11         }
12         .main{
13             width:200px;
14             height:400px;
15             border:1px solid yellow;
16         }
17     </style>
18 </head>
19 <body>
20 
21 </div>
22 <div class="main">
23    <img src="../img/11.jpg">
24 <img src="../img/11.jpg">
25 </div>
26 </body>
27 </html>

如图所示：

当添加display：block后，效果如下：

6、ie6下空标签高度问题

一个空div如果高度设置为0到19px，IE6下高度默认始终19px。
例如：.text { background-color:#f00; height:0px; /*给定任何小于20px的高度 */}   <div></div>

如果不让它默认为19PX。而是0PX的话
解决方法有3种：
1.css里面加上overflow:hidden;
2.div里面加上注释；<div><!– –></div>
3.css里面加上line-height:0px; 然后div里面加上&nbsp；<div>&nbsp;</div>

7、样式中文注释后引发失效

这是ie6 出现的奇怪现象。这是由于css 和html 的编码不同所引致。

满足下面条件就会引起 注释下面的样式不起作用：
1. css有中文注释
2. css为ANSI编码
3. html为utf-8编码

解决方法：
1. 去掉中文注释，用英文注释
2. 统一css 和 html 的编码（建议采用第二种解决方法）

ps： css为uft-8  html 为ANSI 不会出现失效的情况。

 

8、ie6下的圆角

IE6不支持CSS3的圆角，性价比最高的解决方法就是用图片圆角来替代，或者放弃IE6的圆角。

例如如下代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style>
 6         .main{
 7             width:100px;
 8             height:50px;
 9             background: red;
10           border-radius: 10px;;
11         }
12     </style>
13 </head>
14 <body>
15 </div>
16 <div class="main">  </div>
17 </body>
18 </html>

在ie6下的结果为：                                                    ie9下：
                                  

 

9、最小高度

     ie6不支持min-height属性，但它却认为height就是最小高度。解决方法：使用ie6不支持但其余浏览器支持的属性!important。

例：#container {min-height:200px; height:auto !important; height:100px;}

10、100% 高度

在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%;

如下代码所示：前为不加body高度时的效果，后为加上body高度时的效果：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style>
 6      body{
 7          height:100%;
 8      }
 9         .main{
10             width:50px;
11             background: red;
12             height:100%;
13         }
14     </style>
15 </head>
16 <body>
17 </div>
18 <div class="main">  </div>
19 </body>
20 </html>

效果：
  

设置父级高度后：

   

11、躲猫猫bug

在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。

解决方法很简单：在（那个未浮动的）内容之后添加一个<span style="clear: both;"> </span>
如以下代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style>
 6 
 7         .main{
 8             width:150px;
 9             height:auto;
10             background: red;
11             color:#ffffff;
12             float: left;
13         }
14         .tit{
15             float:left;
16         }
17         .main a{
18             color:green;
19             clear: both;
20         }
21         .main a:hover{
22             color:cyan;
23         }
24     </style>
25 </head>
26 <body>
27 </div>
28 <div class="main">
29      <p class="tit">
30          做前端要有爱<br>
31          做前端要有爱<br>
32          做前端要有爱<br>
33          做前端要有爱<br>
34          做前端要有爱<br>
35      </p>
36     <a href="#">你猜你猜你猜你猜</a>
37 </div>
38 </body>
39 </html>

没有添加clear：both时：                                                               添加clear:both之后

                              

12、终极方法：条件注释

<!--[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本。 <![endif]-->

<!--[if gte IE 6]> 这段文字仅显示在 IE6及IE6以上版本。 <![endif]-->

<!--[if gt IE 6]> 这段文字仅显示在 IE6以上版本（不包含IE6）。 <![endif]-->

<!--[if IE 5.5]> 这段文字仅显示在 IE5.5。 <![endif]-->

<!--在 IE6及IE6以下版本中加载css-->

<!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css"/><![endif]-->

缺点是在IE浏览器下可能会增加额外的HTTP请求数。

 

 

---恢复内容结束---

posted @ 2013-09-03 14:19  zhunaoke  阅读(320)  评论(0)  编辑  收藏  举报