1、双倍边距

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

 <!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box{
background: rosybrown;
width:100px;
height:200px;
float: left;
margin-left: 100px;
display: inline;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

显示的结果如下:

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

                                 

2、3像素问题

问题:2列布局。左列固定,右列液态

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

 <!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.left{
background: red;
width:100px;
height:100px;
float:left;
}
.right{
width:100px;
height:100px;
background: green;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</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宽度改成偶数。

 <!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.waibu{
background: #4386d4;
color:#000;
width:401px;
height:200px;
position: relative; }
.libu{
background: red;
color:#ffffff;
width:100px;
height:100px;
top:0px;
right:0px;
position: absolute;
} </style>
</head>
<body> <div class="waibu">
background: #4386d4;
color:#ffffff;
width:400px;
height:200px;
<div class="libu">
background: red;
color:#ffffff;
width:100px;
height:100px;
vertical-align: middle;
</div>
</div> </body>
</html>
 <!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.waibu{
background: #4386d4;
color:#000;
width:401px;
height:200px;
position: relative; }
.libu{
background: red;
color:#ffffff;
width:100px;
height:100px;
top:0px;
right:0px;
position: absolute;
} </style>
</head>
<body> <div class="waibu">
background: #4386d4;
color:#ffffff;
width:400px;
height:200px;
<div class="libu">
background: red;
color:#ffffff;
width:100px;
height:100px;
vertical-align: middle;
</div>
</div> </body>
</html>

在FF中:                                                                                                                                            ie6下:

                              

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

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

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

 <!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
background:tan;
}
img{ }
.main{
width:200px;
height:400px;
border:1px solid yellow;
}
</style>
</head>
<body> </div>
<div class="main">
<img src="../img/11.jpg">
<img src="../img/11.jpg">
</div>
</body>
</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的圆角。

例如如下代码:

 <!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.main{
width:100px;
height:50px;
background: red;
border-radius: 10px;;
}
</style>
</head>
<body>
</div>
<div class="main"> </div>
</body>
</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高度时的效果:

 <!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
height:100%;
}
.main{
width:50px;
background: red;
height:100%;
}
</style>
</head>
<body>
</div>
<div class="main"> </div>
</body>
</html>

效果:

设置父级高度后:

11、躲猫猫bug

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

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

 <!DOCTYPE html>
<html>
<head>
<title></title>
<style> .main{
width:150px;
height:auto;
background: red;
color:#ffffff;
float: left;
}
.tit{
float:left;
}
.main a{
color:green;
clear: both;
}
.main a:hover{
color:cyan;
}
</style>
</head>
<body>
</div>
<div class="main">
<p class="tit">
做前端要有爱<br>
做前端要有爱<br>
做前端要有爱<br>
做前端要有爱<br>
做前端要有爱<br>
</p>
<a href="#">你猜你猜你猜你猜</a>
</div>
</body>
</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请求数。

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

IE6下css常见bug处理的更多相关文章

  1. IE6中CSS常见BUG全集及解决方案——摘自网友

    IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...

  2. IE6下CSS常见兼容性问题及解决方案

    1. 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素加浮动. 2. IE6下最小高度问题:在IE6下元素高度小于19px的时候,会被当作19px处理.解决方案:给元素加 overflow:h ...

  3. jquery博客收集的IE6中CSS常见BUG全集及解决方案

    今天的样式调的纠结,一会这边一会那么把jquery博客折腾的头大,浏览器兼容性.晚上闲着收集一些常见IE6中的BUG 3像素问题及解决办法 当使用float浮动容器后,在IE6下会产生3px的空隙,有 ...

  4. IE6的那些css常见bug(汇总)

    IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的, ...

  5. 我的第一篇文章 —— IE6的那些css常见bug(汇总)

    我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的,听到了一些前端知识或者前沿技术. 另外 ...

  6. IE6对CSS支持Bug收集

    1.IE6双外边距 在IE6下,如果对元素设置了浮动,同时又设置了margin-left或者margin-right,margin值会加倍. 例如,设置margin-left:10px在IE6下会显示 ...

  7. IE6中的常见BUG与相应的解决办法

    开发前端的同学一定都知道,IE6是兼容BUG最多的浏览器,它不支持PNG alpha通道暂且不论.其文档的解析理解规范也引起了诸多恼人的BUG,有时甚至让人感到绝望.本文主要讲解一些比较容易遇到的IE ...

  8. CSS常见BUG

    CSS Hack IE条件注释: 所有IE:<!--[if IE]> css code <![endif]--> IE6以上:<!--[if gt IE 6]> c ...

  9. js在ie6下的一个bug—未结束标签的错误

    在IE6下,如果在body标签没结束前,用代码获取body对象就会出现错误.如: <html> <head> <script type="text/javasc ...

随机推荐

  1. Java加密解密大全

    ChinaSEI系列讲义(By 郭克华)   Java加密解密方法大全                     如果有文字等小错,请多包涵.在不盈利的情况下,欢迎免费传播. 版权所有.郭克华 本讲义经 ...

  2. 【dfs】【哈希表】bzoj2783 [JLOI2012]树

    因为所有点权都是正的,所以对每个结点u来说,每条从根到它的路径上只有最多一个结点v符合d(u,v)=S. 所以我们可以边dfs边把每个结点的前缀和pre[u]存到一个数据结构里面,同时查询pre[u] ...

  3. 【模拟】洛谷 P1328 NOIP2014提高组 day1 T1 生活大爆炸版石头剪刀布

    把所有情况打表,然后随便暴力. #include<cstdio> using namespace std; int n,an,bn,p1,p2; ],b[]; ][]; int ans1, ...

  4. [CEOI2017]One-Way Streets

    题目大意: 给你一个无向图,现在告诉你一些点对(u,v), 要你在保证从u到v的所有路径都不变的情况下,尽可能把所有的边变成单向边, 问你可以唯一确定哪些边的方向,以及方向是从u到v还是从v到u. 思 ...

  5. Problem J: 零起点学算法34——3n+1问题

    #include<stdio.h> int main() { ; int n; scanf("%d",&n); ) { ==) n=n*+; else n/=; ...

  6. 2016年31款轻量高效的开源 JavaScript 插件和库

    目前有很多网站设计师和开发者喜欢使用由JavaScript开发的插件和库,但同时面临一个苦恼的问题:它们中的大多数实在是太累赘而且常常降低网站的性能.其实,其中也有不少轻量级的插件和库,它们不仅轻巧有 ...

  7. Android2017进阶知识点、面试题及答案(精选版)

    前言 没啥好说的,撸起袖子就是干吧! 1 2 JAVA 相关 1.静态内部类.内部类.匿名内部类,为什么内部类会持有外部类的引用?持有的引用是this?还是其它? 静态内部类:使用static修饰的内 ...

  8. Kubernetes环境下如何运行Coherence缓存集群

    Oracle官方出了一个如何在Docker环境下运行Coherence的技术文档,大家可以参考: https://github.com/oracle/docker-images/tree/master ...

  9. CSS 布局模型

    css布局模型 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上.又不同于我们常说的 CSS 布局样式或 CSS 布局模板.假设说布局模型是本.那么 CSS ...

  10. 原型设计工具——Axure

    1,百度百科 http://baike.baidu.com/view/3332366.htm?from_id=5056136&type=syn&fromtitle=axure& ...