【IE6的疯狂系列】IE6下使用滤镜后链接不能点击的BUG

大家可能都知道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征集、整理中..)

【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG(2010年3月30日更新)

在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8及firefox、chrome等不一致。

在父层使用position:relative;和padding(当然0值除外)后,ie6中层的定位起始坐标是从padding后的位置算起,而其他则从层的真实位置算起,而非被padding改变后的那个位置。这点造成使用position:absolute进行层定位时ie6与其他浏览器的表现不一样。

未标题-1

目前解决办法,使用csshack,_left针对ie6进行重设。

另:IE6 BUG大全: http://www.css88.com/archives/579

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

今天收到robertsky123的留言(见留言区):

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

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

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

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

[code=”html”]

test box

[/code]

显示如图:

继续阅读

【IE6的疯狂之十三】使用浮动去掉元素中的多余空白间距

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

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

看html代码: 继续阅读

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

一 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”的规则有最高优先级。

继续阅读

【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像素而是一整条空白行,如图:

2009-04-13_140600

HTML代码:

[code=”html”]

[/code] 继续阅读

【IE6的疯狂之一】IE6中奇数宽高的BUG

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

如图:

14_145449_22008104223759

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

14_145538_62008104223844

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代码
  1. a:hover{background:url(imagepath)}  

常用的解决方案:

在页面底部添加以下IE6专用代码,让IE6缓存CSS背景图片至本地,这样a:hover时IE6就不会再重新向服务器请求加载背景图片了。

 

XML/HTML代码
  1. <!–[if IE 6]>  
  2. <script type=”text/javascript”>  
  3. document.execCommand(”BackgroundImageCache”, false, true);   
  4. </script>  
  5. <![endif]–>  
  6.   

  继续阅读

【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属性有四个可选值,它们分别是:staticabsolutefixedrelative。我们下面来共同学习它们的不同的用法,在学习中我们应该去思考在什么布局情况下,应该使用它们其中的哪一种。

 

描述
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,并愿意共享,请您留言,来邮件: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