WEB前端开发

大家可能都知道IE6下使用DXImageTransform.Microsoft.AlphaImageLoader滤镜（用于PNG32 Alpha透明）后链接不能点击的BUG，大家也都知道只要在a标签上加相对定位的属性（position:relative）就可以点击了。

见demo页面中的例子1：http://www.css88.com/demo/ie6bug_filter/(使用IE6查看)；

非常好！但是如果在使用滤镜容器的中加上绝对定位，悲剧发生了！a标签上加相对定位的属性（position:relative）链接依然不能点击！

见demo页面中的例子2：http://www.css88.com/demo/ie6bug_filter/(使用IE6查看)；

经过近半个小时的折腾终于有了解决方案，就是在使用滤镜的容器外面再加上一个容器，这个容器加上绝对定位。a标签上加相对定位的属性（position:relative）就可以点击了。

见demo页面中的例子3：http://www.css88.com/demo/ie6bug_filter/(使用IE6查看)；

原因可能如下：

DXImageTransform.Microsoft.AlphaImageLoader可能改变了容器的层级，真好正好定位属性也能改变元素层级。

如果你知道原因或者有更好的解决方案欢迎留言斧正，探讨。谢谢！

另：

【IE6的疯狂系列】IE6 BUG大全（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

===========================以下内容2010年3月30日更新=============================

今天收到robertsky123的留言（见留言区）：

一些样例请测试好再传，会误导读者的，还有ie与其他主流浏览器的盒模式是一样的，不是ie定了width在加padding就不会改变宽度也是改变的， 网上有些东西很容易误导读者，请博主对读者负责啊！

非常感谢robertsky123的留言和建议！由于robertsky123当头棒喝使我重新对该问题进行了测试。

确实该问题还有其他的解决：不过这些方案很和实际项目有关，比如这个父级容器是否顶宽定高等其他原因。

首先看问题的产生,HTML和CSS如下：

<div style="position:relative; padding:20px; border:2px solid #F00;">

<div style="position:absolute; top:0; left:0; border:1px solid #690;">test box</div>

</div>

显示如图：

继续阅读：【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG（2010年3月30日更新）»

IE6的某些元素在表现上有多余的一些空白间隙，或者更形象的说是“外边距（margin）”，要么是margin-top，要么是margin-bottom，当然还有margin-left，margin-right。这个在表单元素中特别常见。即使我们的reset css已经将这些元素的margin值设为0。

可以看一个实例：比如们想模拟一个双边框的文本框，如图：

看html代码： 继续阅读：【IE6的疯狂之十三】使用浮动去掉元素中的多余空白间距»

一 css的优先级

今天有人跟我说css hack中用!important来区分ie6，因为ie6不支持!important，是的在很早以前我也是用过这种方法写hack，但是后来就基本不用了。本来我对他谁的ie6不支持!important也没什么异议，可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题，而且是支持ie6的，这是为什么呢？到底ie6支不支持!important呢？

首先我们来看看!important这个属性的作用：!important是用来提升样式优先级的，我们知道样式是有优先级的。

我们先看看css的优先级的几个基本的规则：

1. ID选择器(形如#id{}) > 类选择器(形如.class{}) > 标签选择器(形如body{}或者*｛｝)，也就是ID选择器，类选择器，标签选择器中，ID选择器的优先级最高，标签选择器最低；(转载请注明出处：WEB前端开发 http://www.css88.com/)
2. 选择器越具体优先级就越高，也就是
   .classA .classB .classC{font-size: 25px;}
   .classB .classC{font-size:18px}
   .classC { font-size: 12px; }
   这里.classA .classB .classC的优先级最高，.classC的优先级最低；
3. 在同一个级别的情况下，最后指定的规则优先级就越高，也就是我们通常说的就近原则；html中标签的style的属性都高于css文件中的选择器样式；
4. 标有”!important”的规则有最高优先级。

继续阅读：css的优先级及!important在IE6下的一个BUG[2009年8月1日更新]»

曾经写过【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的疯狂之九】li在IE中底部空行的BUG»

IE6真是太疯狂了。今天由于项目需要做了这么一个布局：一个外部的相对定位div，内部一个绝对定位的div（right:0），

如图：

可是在IE6下查看，却变成了right:1px的效果了：

IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。高度也是一样的
查看源码：

CSS代码:

XML/HTML代码:

IE6下链接伪类（:hover）CSS背景图片有闪动BUG，主要原因ie会再一次请求这张图片，或者说图片没被缓存。

例如：

常用的解决方案：

  继续阅读：【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG»

这是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

Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。我们下面来共同学习它们的不同的用法，在学习中我们应该去思考在什么布局情况下，应该使用它们其中的哪一种。

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 BUG大全】position:fixed在IE6下的实现»

IE6 bug到底令我们前端开发头痛我就不多说了

说实话，很多东西我一直在回避IE6的BUG，比如不用半透明的PNG。。。

但是毕竟IE6还将长期存在，而且IE6在中国比例目前还绝对多数，所以我们无法回避。逃无可逃，退无可退！

现整理收集《【IE6的疯狂系列】IE6 bug大全》仅供参考。

如果大家发现IE6或者IE7的BUG，并愿意共享，请您留言，来邮件:feiwen8772@qq.com,或者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下使用滤镜后链接不能点击的BUG：http://www.css88.com/archives/2916