IE6Bug(WEB前端开发 http://www.css88.com/)

css的优先级及!important在IE6下的一个BUG[2009年8月1日更新] 
一 css的优先级
今天有人跟我说css hack中用!important来区分ie6，因为ie6不支持!important，是的在很早以前我也是用过这种方法写hack，但是后来就基本不用了。本来我对他谁的ie6不支持!important也没什么异议，可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题，而且是支持ie6的，这是为什么呢？到底ie6支不支持!important呢？
首先我们来看看!important这个属性的作用：!important是用来提升样式优先级的，我们知道样式是有优先级的。
我们先看看css的优先级的几个基本的规则：http://www.css88.com/archives/tag/ie6-bug
ID选择器(形如#id{}) > 类选择器(形如.class{}) > 标签选择器(形如body{}或者*｛｝)，也就是ID选择器，类选择器，标签选择器中，ID选择器的优先级最高，标签选择器最低；(转载请注明出处：WEB前端开发 http://www.css88.com/)
选择器越具体优先级就越高，也就是
.classA .classB .classC{font-size: 25px;}
.classB .classC{font-size:18px}
.classC { font-size: 12px; }
这里.classA .classB .classC的优先级最高，.classC的优先级最低；
在同一个级别的情况下，最后指定的规则优先级就越高，也就是我们通常说的就近原则；html中标签的style的属性都高于css文件中的选择器样式；
标有”!important”的规则有最高优先级。
【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG 
在前端开发中，经常会用到css的position:absolute来使层浮动，前通过left,top,right等属性来对层进行定位，但ie6对left,top,right等属性的解释和ie7，ie8及firefox、chrome等不一致。
在父层使用position:relative;和padding（当然0值除外）后，ie6中层的定位起始坐标是从padding后的位置算起，而其他则从层的真实位置算起，而非被padding改变后的那个位置。这点造成使用position:absolute进行层定位时ie6与其他浏览器的表现不一样。
目前解决办法，使用csshack,_left针对ie6进行重设。
另：IE6 BUG大全： http://www.css88.com/archives/579
【IE6的疯狂之九】li在IE中底部空行的BUG 
曾经写过【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题），原文地址： http://www.css88.com/archives/421；
IE6 BUG大全： http://www.css88.com/archives/579
但是这次li在IE中底部出现的不是3像素而是一整条空白行，如图：
HTML代码：
<ul>
  <li><a href="#">第1条连接</a></li>
  <li><a href="#">第2条连接</a></li>
  <li><a href="#">第3条连接</a></li>
</ul>
【IE6的疯狂之一】IE6中奇数宽高的BUG 
IE6真是太疯狂了。今天由于项目需要做了这么一个布局：一个外部的相对定位div，内部一个绝对定位的div（right:0），
如图：
可是在IE6下查看，却变成了right:1px的效果了：
IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。高度也是一样的
查看源码：
CSS代码:
#out {
width: 609px;/*这里宽度为奇数，bug就出现了！！改成偶数就OK了*/
height: 300px;
position: relative;
background:#FF0000;
color:#FFF;
}
#inn {
width: 200px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background:#000000;
}
XML/HTML代码:
<div id=“out”>
<div id=“inn”>此处为内部绝对定位的 DIV</div>
</div>
【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG 
IE6下链接伪类（:hover）CSS背景图片有闪动BUG，主要原因ie会再一次请求这张图片，或者说图片没被缓存。
例如：
CSS代码
a:hover{background:url(imagepath)}  
常用的解决方案：
在页面底部添加以下IE6专用代码，让IE6缓存CSS背景图片至本地，这样a:hover时IE6就不会再重新向服务器请求加载背景图片了。
 
XML/HTML代码
<!–[if IE 6]>  
<script type=”text/javascript”>  
document.execCommand(”BackgroundImageCache”, false, true);   
</script>  
<![endif]–>  
  
 
【IE6的疯狂之七】样式中文注释后引发失效 
这是ie6 出现的奇怪现象。这是由于css 和html 的编码不同所引致。
满足下面条件就会引起 注释下面的样式不起作用：
1. css有中文注释
2. css为ANSI编码
3. html为utf-8编码
解决方法：
1. 去掉中文注释，用英文注释
2. 统一css 和 html 的编码
建议采用第二种解决方法
ps： css为uft-8  html 为ANSI 不会出现失效的情况。
参考文章：冯子胡说 的 http://vontall.blogbus.com/logs/4366443.html
【IE6 BUG大全】position:fixed在IE6下的实现 
 
Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。我们下面来共同学习它们的不同的用法，在学习中我们应该去思考在什么布局情况下，应该使用它们其中的哪一种。
 
值
描述
static
默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
relative
位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 “left:20″ 会将元素移至元素正常位置左边 20 个像素的位置。
absolute
位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。
fixed
位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。
 
position:static　无定位
该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。
如：#nav{position:static;}
这个定位属性值是什么意思呢？元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。
其他两种前面提过，我们 主要说的是fixed
position:fixed　相对于窗口的固定定位
请特别注意，IE6及以下不支持CSS中的position:fixed属性。真的非常遗憾，所以我们只能通过JS模拟和CSS Hack等方法来实现。
1.IE条件注释解决方案：
demo： http://www.css88.com/demo/position_fixed/POSITION_fixed2.html
【IE6的疯狂系列】IE6 BUG大全（bug征集、整理中..） 
IE6 bug到底令我们前端开发头痛我就不多说了
说实话，很多东西我一直在回避IE6的BUG，比如不用半透明的PNG。。。
但是毕竟IE6还将长期存在，而且IE6在中国比例目前还绝对多数，所以我们无法回避。逃无可逃，退无可退！
现整理收集《【IE6的疯狂系列】IE6 bug大全》仅供参考。
如果大家发现IE6或者IE7的BUG，并愿意共享，请您留言，来邮件:[e-mail],或者QQ：148246293，本人将尽快总结这里，和大家一起分享。
【IE6的疯狂之一】IE6中奇数宽高的BUG：http://www.css88.com/archives/1725
【IE6的疯狂之二】IE6中PNG Alpha透明：http://www.css88.com/archives/577
【IE6的疯狂之三】IE6 3像素BUG的实例：http://www.css88.com/archives/117
【IE6的疯狂之四】IE6文字溢出BUG：http://www.css88.com/archives/253
【IE6的疯狂之五】div遮盖select的解决方案：http://www.css88.com/archives/545
【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题）：http://www.css88.com/archives/421
【IE6的疯狂之七】样式中文注释后引发失效：http://www.css88.com/archives/726
【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG：http://www.css88.com/archives/744
【IE6的疯狂之九】li在IE中底部空行的BUG：http://www.css88.com/archives/1111
【IE6的疯狂之十】父级使用padding后，子元素绝对定位的BUGhttp://www.css88.com/archives/1584
【IE6的疯狂之十一】!important在IE6下的一个BUG：http://www.css88.com/archives/1716
【IE6的疯狂之十二】一个display:none引起的3像素的BUG：http://www.css88.com/archives/1797
【IE6的疯狂之二】IE6中PNG Alpha透明(全集) 
ie7,fireofx,opera,及至webkit内核的chrome ,safari….. 这些浏览器均支持png的Alpha透明。
很多人说IE6不支持PNG透明，其实IE支持100%透明的PNG，疯狂的IE6只是不支持png的Alpha透明。
这个BUG给我们带来了很大的困扰。
但是这仍然存在很多问题，比如半透明的PNG背景图片。
Gulu77整理了4种IE6中PNG Alpha透明的方法：
测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_IE6png8/index.html
这里用IE6测试，插入的图片和背景图片没有透明。
 
第一种方法：AlphaImageLoader 筛选器
微软给出了一个解决方案：http://support.microsoft.com/kb/294714/zh-cn
 
使用简介：在每个标签样式中插入 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)
注意事项:
AlphaImageLoader难以实现插入图片<img src=”.png”/>透明
AlphaImageLoader方法用于背景图片上,实现background-image的效果
AlphaImageLoader IE8不支持
因为IE7支持AlphaImageLoader,避免冲突建议使用CSS hack区分开,只针对IE6使用
测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_AlphaImageLoader/index.html
 
第二种方法：PNG Transparency in IE
使用简介：相对来说比较简洁，使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度
注意事项:
根目录的spacer.gif透明图片作为png图片的替换,写在JavaScript中的spacer.gif路径根据需要调整
PNGTransparncyinIE方法在背景应用上只能做到background-image的效果, 背景重复坐标调用等暂时实现不了
官方原文：http://codingforums.com/archive/index.php?t-80555.html
测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_PNGTransparncyinIE/index.html
 
第三种方法：IE PNG Fix v1.0 / 2.0 Alpha 3
这是目前最新版本，今天重点介绍的一个方法。
使用简介：页面标签使用behavior:url(”iepngfix.htc”);来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度。
测试实例1：http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
测试实例2（官方，e文）：http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html
支持<img src=””>元素。
支持的背景PNG图像（不像许多其他的脚本！ ）
支持CSS1背景重复和位置（通过可选插件）
背景图像可以被界定内置或在外部的样式表。
自动处理改为钢骨混凝土/背景通过正常的JavaScript （例如鼠标悬停翻车） -没有特殊的编码需要。
改变支持包括CSS的’类别’的变化因素。
采用自动变通的<a href=””>要素巴布亚新几内亚背景因素。
微小的脚本（快速下载） 。
领有牌照的下一个自由软件许可证。
如何使用 Follow these simple steps to add this to your page:遵循这些简单的步骤，将此添加到您的网页：
复制并粘贴iepngfix.htc和blank.gif到您的网站文件夹中。
复制并粘贴到您的网站的CSS或HTML ： 
<style type=”text/css”>
img, div { behavior: url(iepngfix.htc) }
</style>
这的CSS选择器必须包含标签/内容要巴布亚新几内亚支持-基本上，给它一个逗号分隔的清单上的标签使用。它还必须包括正确的路径。宏达相对H TML文件的位置（不相对的CSS文件！ ） 。 [...]
【IE6的疯狂之五】div遮盖select的解决方案 
IE6以及一下版本下，选择框Select会覆盖Div中的内容
一般情况下，可以将显示的内容放到Iframe中，然后再显示框架内的内容。由于Iframe的可以显示在Select上层，就可以解决这个问题。不过这样做在实现上比较麻烦。有个解决的部分就是在Div内容中加入不显示的Iframe框架即可，不用修改其他内容。
例如：http://www.css88.com/demo/div_select/div_select.html
CSS代码
body { margin: 0; padding: 0; text-align: center; background-color: #eee; }   
#bd { margin: 20px auto; padding: 5px 20px 20px; border: 1px solid #bbb; width: 760px; background-color:#9CCE2E;  }   
#popup {width: 300px;height: 100px;padding: 10px;position: absolute;left: 443px;top: 57px;border: 1px solid blue;background-color: #fff;filter:alpha(opacity=60);opacity:0.4;}   
#popup iframe{display:none;/*sorry for IE5*/display/**/:block;/*sorry for IE5*/position:absolute;/*must have*/top:0;/*must have*/left:0;/*must have*/z-index:-1;/*must have*/filter:mask();/*must have*/width: 100%;/*must have for any big value*/height: 100%;/*must have for any big value*/;}  
 
尤其注意这个样式：
#popup iframe{display:none;/*sorry for IE5*/display/**/:block;/*sorry for IE5*/position:absolute;/*must have*/top:0;/*must have*/left:0;/*must have*/z-index:-1;/*must have*/filter:mask();/*must have*/width: 100%;/*must have for any big value*/height: 100%;/*must have for any big value*/;}  
 
XML/HTML代码
<div id=“bd”>  
<h1>IE6下div遮盖select的解决方案</h1>  
<div class=“parameter”>  
<label for=“ddTest”>Test</label>  
<select id=“ddTest”>  
<option>…</option>  
<option>pick me</option>  
</select>  
</div>  
</div>  
<div id=“popup”>  
Is the select element poking through?   
<!–[if lte IE 6.5]><iframe></iframe><![endif]–>  
</div>  
转载注明：http://www.css88.com/article.asp?id=503
注意：<!–[if lte IE 6.5]><iframe></iframe><![endif]–>：表示在IE6下显示<iframe></iframe>，但是我们从样式中可以看出这个iframe是看不到的；
目前存在的bug：IE6下下拉框（select）看不到。

From - http://www.css88.com/archives/tag/ie6-bug

转自：http://minepace.blog.sohu.com/140241914.html