IE6常见bug整理

By Diaoyude  | 发布时间： 09-08 09:47  | Hits：1,253 | Post in： WEB前端 , Div-Css
针对IE6常见的一些ie6bug,ie6png,E6fixed,ie6 a:hover span bug
今天goole下又发现了一个，整理备录下

1. 强制浏览器是用Web标准解析
HTML的写法

  1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
  2. “http://www.w3.org/TR/html4/strict.dtd”>
  4. 或者XHTML的写法
  5. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
  6. “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

2、CSS选择器区分
IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。

  1. .content {color:red;}
  2. div>p .content {color:blue;} –>

3、PNG半透明图片的问题
虽然可以通过JS等方式解决，但依然存在载入速度等问题，所以，这个在设计上能避免还是尽量避免为好。以达到网站最大优化。

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

5、IE6背景闪烁
如果你给链接、按钮用CSS sprites作为背景，你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存，每次触发hover的时候都会重新加载，可以用JavaScript设置IE6缓存这些图片：

  1. document.execCommand(“BackgroundImageCache”,false,true);

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

  1. #container {min-height:200px; height:auto !important; height:200px;}

7、最大高度
//直接使用ID来改变元素的最大高度

  1. var container = document.getElementByIdx_xx_x(‘container’);
  2. container.style.height = (container.scrollHeight > 199) ? “200px” : “auto”;
  3. //写成函数来运行
  4. function setMaxHeight(elementId, height){
  5. var container = document.getElementByIdx_xx_x(elementId);
  6. container.style.height = (container.scrollHeight > (height – 1)) ? height + “px” : “auto”;
  7. }
  8. //函数示例
  9. setMaxHeight(‘container1′, 200);
  10. setMaxHeight(‘container2′, 500);

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

9、最小宽度
同max-height和max-width一样，IE6也不支持min-width。

  1. //直接使用ID来改变元素的最小宽度
  2. var container = document.getElementByIdx_xx_x(‘container’);
  3. container.style.width = (container.clientWidth < width) ? “500px” : “auto”;
  4. //写成函数来运行
  5. function setMinWidth(elementId, width){
  6. var container = document.getElementByIdx_xx_x(elementId);
  7. container.style.width = (container.clientWidth < width) ? width + “px” : “auto”;
  8. }
  9. //函数示例
  10. setMinWidth(‘container1′, 200);
  11. setMinWidth(‘container2′, 500);

10、最大宽度
//直接使用ID来改变元素的最大宽度

  1. var container = document.getElementByIdx_xx_x(elementId);
  2. container.style.width = (container.clientWidth > (width – 1)) ? width + “px” : “auto”;
  3. //写成函数来运行
  4. function setMaxWidth(elementId, width){
  5. var container = document.getElementByIdx_xx_x(elementId);
  6. container.style.width = (container.clientWidth > (width – 1)) ? width + “px” : “auto”;
  7. }
  8. //函数示例
  9. setMaxWidth(‘container1′, 200);
  10. setMaxWidth(‘container2′, 500);

11、双边距Bug
 

    双边距的产生是由于float元素的浮动方向跟margin的方向一致导致的。也就是说float是left的时候，只有添加了margin-left才会产生双边距bug，要是添加了margin-right也不会产生这个bug。当有多个同行元素都浮动了，而且都有同方向的margin，则只有最靠近浮动方向的元素有双边距bug。
请看效果：
正常的：一个ie6双边距bugie6：一个ie6双边距bug
代码：
<!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值）才能将浮动元素严实地包裹。

  1. #container {border:1px solid #333; overflow:auto; height:100%;}
  2. #floated1 {float:left; height:300px; width:200px; background:#00F;}
  3. #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;  就可以解决了
posted @ 2014-01-06 12:37  CatherineGao  阅读(658)  评论(0)  编辑  收藏  举报