日志标签：IE6

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

时间：2010年12月23日作者：愚人码头查看次数:6,766 views评论次数：14

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

标签：,分类：html+css

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

时间：2010年03月30日作者：愚人码头查看次数:17,183 views评论次数：39

在前端开发中，经常会用到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如下：


<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日更新）»

标签：,分类：html+css

圆角头像的制作

时间：2009年08月20日作者：愚人码头查看次数:6,114 views评论次数：6

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

2009-08-19_1731512009-08-20_122313

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

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

2009-08-20_123344

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

2009-08-20_124016 继续阅读：圆角头像的制作»

标签：,,分类：html+css

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

时间：2009年05月29日作者：愚人码头查看次数:20,391 views评论次数：83

前端开发中少不了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失效

时间：2009年05月27日作者：愚人码头查看次数:5,951 views评论次数：2

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

看代码：


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
a:hover { }
a:hover span{color:#F00;}
</style>
</head>

<body>
<a href="#">鼠标经过时改变我的<span>颜色</span></a>
</body>
</html>

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

标签：,,分类：html+css
Page 1 of 11