按标签归档 IE6

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

由 愚人码头 撰写  |  2010/03/30 18:58 发表在 (x)html+css, 前端名博  |  评论 (23)

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

圆角头像的制作

由 愚人码头 撰写  |  2009/08/20 13:10 发表在 (x)html+css  |  评论 (4)

好多sns的头像都使用圆角了，昨天在校内上看到了圆角头像，今天在Qzone的也看到了圆角头像，圆角头像看上去比直角的美观。 圆角头像的制作原理就是在头像上覆盖一张透明的图片，把四个角颜色设置成页面的背景颜色，中间透明， 假设我的页面底色是纯黑色的，那么这个透明图片可以做成这样，如图： 这里需要注意的是需要把图片保存成24位的png，虽然IE6支持8位的png的透明，但是8位的png做透明圆弧图片存在效果上的问题，就是存在白色的杂边或锯齿，如图：

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

由 愚人码头 撰写  |  2009/05/29 02:54 发表在 前端工具  |  评论 (46)

前端开发中少不了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 00:51 发表在 (x)html+css  |  评论 (1)

大家都知道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}等等。