【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]

显示如图:

继续阅读

圆角头像的制作

好多sns的头像都使用圆角了,昨天在校内上看到了圆角头像,今天在Qzone的也看到了圆角头像,圆角头像看上去比直角的美观。

2009-08-19_1731512009-08-20_122313

圆角头像的制作原理就是在头像上覆盖一张透明的图片,把四个角颜色设置成页面的背景颜色,中间透明,

假设我的页面底色是纯黑色的,那么这个透明图片可以做成这样,如图:

2009-08-20_123344

这里需要注意的是需要把图片保存成24位的png,虽然IE6支持8位的png的透明,但是8位的png做透明圆弧图片存在效果上的问题,就是存在白色的杂边或锯齿,如图:

2009-08-20_124016 继续阅读

作为一名前端开发工程师居然没有IE6!

前端开发中少不了IE6测试啊,我的机器装了win7,可是win7不能运行ie6,装了ietest,一打开IE6标签,ietest就挂了,不知道ietest什么时候能在win7下正常使用;再用Internet Explorer Collection,ie6倒是装上了,但是使用起来仿佛回到了ie1时代,都不知怎么用,卸了!

网上都说装Virtual PC虚拟机,可是我的CPU是英特尔® 酷睿™2 双核T5750,居然不支持虚拟化技术,我仅代表和我一样使用英特尔® 酷睿™2 双核T5750的所有用户深切的鄙视这个cpu。

作为一名前端开发工程师居然没有IE6!天哪!

如何在win7里运行ie6啊… 现在木有ie6是相当头疼啊…

haslayout引起的IE6 :hover失效

大家都知道IE6之支持<a>标签的:hover为了,但是通常在做实际效果的时候<a>标签 :hover在IE6下会失效,

看代码:

[code=”html”]

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
http://www.w3.org/1999/xhtml”>


无标题文档


鼠标经过时改变我的颜色

[/code]

在IE6下“颜色”根本就不会变成红色,其他浏览器都是好的,要解决这个问题就必须触发a:hover的layout,例如a:hover { display:inline-block}或者a:hover { zoom:1}等等。