IE6常见bug整理
今天goole下又发现了一个，整理备录下
1. 强制浏览器是用Web标准解析
HTML的写法
- <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
- “http://www.w3.org/TR/html4/strict.dtd”>
- 或者XHTML的写法
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
- “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
2、CSS选择器区分
IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。
- .content {color:red;}
- div>p .content {color:blue;} –>
3、PNG半透明图片的问题
虽然可以通过JS等方式解决，但依然存在载入速度等问题，所以，这个在设计上能避免还是尽量避免为好。以达到网站最大优化。
4、IE6下的圆角
IE6不支持CSS3的圆角属性，性价比最高的解决方法就是用图片圆角来替代，或者放弃IE6的圆角。
5、IE6背景闪烁
如果你给链接、按钮用CSS sprites作为背景，你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存，每次触发hover的时候都会重新加载，可以用JavaScript设置IE6缓存这些图片：
- document.execCommand(“BackgroundImageCache”,false,true);
6、最小高度
IE6 不支持min-height属性，但它却认为height就是最小高度。解决方法：使用ie6不支持但其余浏览器支持的属性!important。
- #container {min-height:200px; height:auto !important; height:200px;}
7、最大高度
//直接使用ID来改变元素的最大高度
- var container = document.getElementByIdx_xx_x(‘container’);
- container.style.height = (container.scrollHeight > 199) ? “200px” : “auto”;
- //写成函数来运行
- function setMaxHeight(elementId, height){
- var container = document.getElementByIdx_xx_x(elementId);
- container.style.height = (container.scrollHeight > (height – 1)) ? height + “px” : “auto”;
- }
- //函数示例
- setMaxHeight(‘container1′, 200);
- setMaxHeight(‘container2′, 500);
8、100% 高度
在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义 height:100%;。
9、最小宽度
同max-height和max-width一样，IE6也不支持min-width。
- //直接使用ID来改变元素的最小宽度
- var container = document.getElementByIdx_xx_x(‘container’);
- container.style.width = (container.clientWidth < width) ? “500px” : “auto”;
- //写成函数来运行
- function setMinWidth(elementId, width){
- var container = document.getElementByIdx_xx_x(elementId);
- container.style.width = (container.clientWidth < width) ? width + “px” : “auto”;
- }
- //函数示例
- setMinWidth(‘container1′, 200);
- setMinWidth(‘container2′, 500);
10、最大宽度
//直接使用ID来改变元素的最大宽度
- var container = document.getElementByIdx_xx_x(elementId);
- container.style.width = (container.clientWidth > (width – 1)) ? width + “px” : “auto”;
- //写成函数来运行
- function setMaxWidth(elementId, width){
- var container = document.getElementByIdx_xx_x(elementId);
- container.style.width = (container.clientWidth > (width – 1)) ? width + “px” : “auto”;
- }
- //函数示例
- setMaxWidth(‘container1′, 200);
- setMaxWidth(‘container2′, 500);
11、双边距Bug
双边距的产生是由于float元素的浮动方向跟margin的方向一致导致的。也就是说float是left的时候，只有添加了margin-left才会产生双边距bug，要是添加了margin-right也不会产生这个bug。当有多个同行元素都浮动了，而且都有同方向的margin，则只有最靠近浮动方向的元素有双边距bug。
请看效果：
正常的：ie6：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
.bigbox{width:300px;height:300px;border:1px solid #ccc;}
.box{float:right;margin-right:10px;width:100px;height:100px;background:#f90;}
</style>
</head>
<body>
<div class="bigbox">
<div
class="box"></div>
<div
class="box"></div>
</div>
</body>
</html>
解决这个bug有两个方法：
1.给float的元素添加一个display：inline
2.给ie6写一个hack，其值是正常值的一半，即_margin-right:5px;这个方法不推荐，因为要加hack写法，而这个是要尽量避免写的。但是这个正好能够说明这个bug的真实存在。
12、清除浮动
如果你想用div(或其他容器)包裹一个浮动的元素，你会发现必须给div(容器)定义明确的height、width、overflow之中一个属性（除了auto值）才能将浮动元素严实地包裹。
- #container {border:1px solid #333; overflow:auto; height:100%;}
- #floated1 {float:left; height:300px; width:200px; background:#00F;}
- #floated2 {float:right; height:400px; width:200px; background:#F0F;}
13、浮动层错位
当内容超出外包容器定义的宽度时，在IE6中容器会忽视定义的width值，宽度会错误地随内容宽度增长而增长。
浮动层错位问题在IE6下没有真正让人满意的解决方法，虽然可以使用overflow:hidden;或overflow:scroll;来修正，但hidden容易导致其他一些问题，scroll会破坏设计；JavaScript也没法很好地解决这个问题。所以建议是一定要在布局上避免这个问题发生，使用一个固定的布局或者控制好内容的宽度（给内层加width）。
14、躲猫猫bug
产生条件1：一个浮动元素后面跟着一个非浮动元素，接着是一个清理元素，所有元素都包含在一个有背景色或背景图片的父元素中。
html代码：
<div class="father">
<div class="float">这个浮动的文字</div><div>这个就不会浮动了，哈哈</div>
<div class="clear"></div>
</div>
css：
.father{
background:#0aa;
}
.float{
float:left;
border:1px solid #000;
}
.clear{
clear:both;
border:1px solid #000;
}
这里为了看出效果都加了一个黑色的边框。
解决办法1：去掉父元素的背景颜色或图片（要必须有背景的话，这个当然这个不是可行的）。
解决方法2：避免清理元素和浮动元素相接触。
解决方法3：给容器指定一个行高。
解决方法4：将浮动元素和容器元素的position属性设置为relative。
产生条件2：一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一些定义了:hover的 链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。
解决方法很简单：
1.在（那个未浮动的）内容之后添加一个<span style=”clear: both;”> </span>
2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;
15、绝对定位元素的1像素间距bug
IE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会产生错误。唯一的解决办法就是给父元素定义明确的高宽值，但对于液态布局没有完美的解决方法。
16、3像素间距bug
3像素bug是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现。
我们看下面的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>IE6的3像素bug - CSS学习网(www.cssxuexi.cn)</title>
<style type="text/css">
#sideBar{
width:100px;
height:100px;
background:#6bee68;
float:left;
}
#content{
width:200px;
height:100px;
background:#56bcf3;
}
</style>
</head>
<body>
<div id="sideBar">sideBar</div>
<div id="content">content</div>
</body>
</html>
在不同的浏览器下效果如下图：
IE6吧sideBar和content中间居然还有一个3像素(px)的间隙，IE8和FF是按照W3C页面标准进行解析，当一个元素浮动的时候就会脱离原本的文本流，而后面的元素就会忽视它的存在。
解决方法：1、给非浮动元素也加上左侧浮动。
2、仅对于3像素bug：使用hack _mgrgin-right:-3px;
17、IE下z-index的bug
Web 2.0 的一大特征就是页面不再是平的，我们开始有各种浮层、窗口、提示，骚一点的，还会给页面蒙上一层阴影，半透明的哦。这些浮层通常都很开心地像浮云一般飘在那边，只要它们没有遭遇 ie6。
浮层盖不住页面的原因有很多，其一是 ie6 中，select 控件是以 Window Shell ListBox 和 ComboBox 方式实现的，不支持 z-index、title、zoom 等，层级很高，不与 div、span 为伍，超脱于 z-index 之外自然就是世外高人了。解决方式就是用一个同样牛逼但不会无视 z-index 的 iframe 来把丫盖掉。公司里不鼓励用 jQuery，这在我看来很是无厘头，可能跟程序员基数有关系，只是未免不够拥抱变化。所以 bgiframe 插件就不好用了。不过不用也好，毕竟为 ie6 添加个 workaround 就得加个 js 请求，有点夸张的。贴一个 YUI3 写的示例。
function fixie6() {
var iframe = Y.Node.create('<iframe frameborder="0" src="javascript:false"></iframe>');
var region = popup.get('region');
iframe.get("style").cssText = "background:transparent;position:absolute;border:none;top:0;left:0;padding:0;margin:0;z-index:-1;filter:alpha(opacity=0);";
iframe.setStyles({
'width': region.width,
'height': region.height
});
popup.appendChild(iframe);
}
另一个 ie6 的浮层 bug，则是 z-index 失效，而该控件明明是支持的。导致这个 bug 的原因有二：浮层或者浮层的子节点被 float 了，其一；父节点有 position: relative; 其二。两个因素都很屎。解决办法相应的就是清除 float；为父节点设 z-index。
18、Overflow Bug
在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上 position:relative;。
19、横向列表宽度bug
如果你使用float:left;把
横向摆列，并且
内包含的（或其他）触发了 hasLayout，在IE6下就会有错误的表现。解决方法很简单，只需要给定义同样的float:left;即可。
21、垂直列表间隙bug
当li元素设置了高度，且li内元素浮动时会触发该bug。
<style>
li{ background-color: green; height: 20px; }
li a { float: left; }
li span { float: right; }
</style>
<ul>
<li><a href="">aaa</a><span>bbb</span></li>
<li><a href="">aaa</a><span>bbb</span></li>
</ul>
解决方法：li设置css vertical-align: bottom;
上边的方法一般都会解决问题，但是许多时候许多未知的原因，还会导致间距问题的出现。试试以下方法：
1.定义行高 line-height
2.设置隐藏 overflow:hidden
3.li增加浮动属性 float
22、IE6中的:hover
在IE6中，除了(需要有href属性)才能触发:hover行为，这妨碍了我们实现许多鼠标触碰效果，但还是有一些法子是可以解决它的。最好是不要用:hover来实现重要的功能，仅仅只用它来强化效果。
23、IE6调整窗口大小的 Bug
当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素都会固定不动了。解决办法：给body定义 position:relative;就行了。
24、文本重复Bug
几个相连的浮动容器中间插入一段html注释代码，就会将最后一个容器中的最后
几个字符复制到容器之外显示出来，不过这个bug只存在于IE6中，IE7及以上版本和Firefox等浏览器
不存在此bug。
<style type="text/css">
div {
width:100%;
float:left;
}
</style>
<div>段落文字</div>
<div>段落文字</div>
<div>段落文字</div><!--引出bug的黑手-->
<div>段落文字</div>
<div>段落文字</div>
解决方法：
其实这个bug的解决方法十分简单，那就是——去掉注释，或者将注释添加到最后一个元素后就可以了。
在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug。解决办法：给浮动元素添加display:inline;。
25、span标签的高度问题
这个在做图片圆角的时候很见，background-position会出现溢出，只要在span标签下加上 line-height:0;font-size:0; 就可以解决了
IE6常见bug整理的更多相关文章
- HTML-IE6兼容性问题及IE6常见BUG详细汇总
点评:IE6的兼容性问题一直都是前端工程师的恶梦,为了早早脱离这种困境,本文整理了一些相关兼容性的知识,感兴趣的朋友可以参考下哈,希望可以帮助到你- 1.终极方法:条件注释 <!--[if lt ...
- IE6兼容性问题及IE6常见bug详细汇总
转载地址:http://www.jb51.net/css/76894.html 1.IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明&l ...
- IE6兼容性问题及IE6常见bug详细汇总－－－转载
1.IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定mar ...
- IE6常见bug
1.IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定mar ...
- 前端之旅HTML与CSS篇之IE6常见BUG
1.IE6怪异解析之padding与border算入宽高原因:未加文档声明造成非盒模型解析解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定marin ...
- Java 常见BUG 整理
1.BigDecimal初始化double 2.Integer java对于-128到127之间的数,会进行缓存,这个范围的Integer对象是同一个! == 是ok,但是超出这个范围就不可以用 ...
- IE6的那些css常见bug（汇总）
IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的, ...
- 我的第一篇文章 —— IE6的那些css常见bug（汇总）
我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的,听到了一些前端知识或者前沿技术. 另外 ...
- IE6常见CSS解析Bug及hack
IE6常见CSS兼容问题总结 1)图片间隙 A)div中的图片间隙(该bug出现在IE6及更低版本中) 描述:在div中插入图片时,图片会将div下方撑大三像素. hack1:将</div> ...
随机推荐
- python练习程序（c100经典例1）
题目: 有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? num=0; for i in range(1,5): for j in range(1,5): for k in ...
- 初步认识mongodb文件
初步认识mongo. README文件介绍压缩包中各个文件的功能. bin/mongod - MongoDB server bin/mongo - MongoDB client bin/mongodu ...
- 定时组件quartz系列<二>quartz的集群原理
1.基本信息: Quartz是一个开源的作业调度框架,它完全由java写成,并设计用于J2Se和J2EE应用中.它提供了巨大的灵活性而不牺牲简单性.你能够用它 来为执行一个作业而创建简单的或 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法
load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或 ...
- [转] VS 整合NUnit进行单元测试
Jeff Wong原文 5分钟实现VS2010整合NUnit进行单元测试 1.下载安装NUnit(最新win版本为NUnit-2.6.0.12051.msi) http://www.nunit.org ...
- jvm调优之四：生产环境参数实例及分析【生产环境实例增加中】
java application项目(非web项目) 改进前: -Xms128m-Xmx128m-XX:NewSize=64m-XX:PermSize=64m-XX:+UseConcMarkSweep ...
- 【转】从外行的视角尝试讲解为什么这回丰田栽了【全文完】【v1.01】
转自:http://club.tgfcer.com/thread-6817371-1-1.html [第一部分]背景简介 前几年闹得沸沸扬扬的丰田刹不住事件最近又有新进展.十月底俄克拉荷马的一次庭审 ...
- dzzoffice教程、文档、开发手册等内容地址
dzzoffice教程.文档.开发手册等内容全部都存放在DzzOffice开发者社区的文集中.搜索引擎收录不到DzzOffice中的应用内容,这里将文集地址提供在这里. 地址:http://dev.d ...
- 类的大小——sizeof 的研究
类的大小——sizeof 的研究(1) 先看一个空的类占多少空间? class Base { public: Base(); ~Base(); }; 注意到我这里显示声明了构造跟析构,但是sizeof ...
- vmware下ubuntu14.04调整分辨率
很多人在vmware中安装ubuntu时,为了调整屏幕分辨率,都去下载并安装vmware-tools.其实,这是没有必要的.如果你需要vmware和宿主机实现共享,或者为了使文件能拖进拖出,再或者是需 ...