<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>WEB前端开发 &#187; IE6</title>
	<atom:link href="http://www.css88.com/archives/tag/ie6/feed" rel="self" type="application/rss+xml" />
	<link>http://www.css88.com</link>
	<description>专注前端开发，关注用户体验</description>
	<lastBuildDate>Sat, 04 Feb 2012 07:22:11 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>【IE6的疯狂系列】IE6下使用滤镜后链接不能点击的BUG</title>
		<link>http://www.css88.com/archives/2916</link>
		<comments>http://www.css88.com/archives/2916#comments</comments>
		<pubDate>Thu, 23 Dec 2010 13:06:14 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[IE6]]></category>
		<category><![CDATA[IE6 BUG]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=2916</guid>
		<description><![CDATA[大家可能都知道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征集、整理中..） 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《【IE6的疯狂系列】IE6下使用滤镜后链接不能点击的BUG》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/2916/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG（2010年3月30日更新）</title>
		<link>http://www.css88.com/archives/1584</link>
		<comments>http://www.css88.com/archives/1584#comments</comments>
		<pubDate>Tue, 30 Mar 2010 10:58:06 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[IE6]]></category>
		<category><![CDATA[IE6 BUG]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1584</guid>
		<description><![CDATA[在前端开发中，经常会用到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如下： &#60;div style=&#34;position:relative; padding:20px; border:2px solid #F00;&#34;&#62; &#60;div style=&#34;position:absolute; top:0; left:0; border:1px solid #690;&#34;&#62;test box&#60;/div&#62; &#60;/div&#62; 显示如图： robertsky123在留言中说的“ie与其他主流浏览器的盒模式是一样的”我真不敢苟同，我始终觉得IE6的盒模式就是和其他主流浏览器盒模式存在差异，如果是一样的，那么试问这个例子IE6为什么会和其他浏览器不同呢？ 虽然相对定位的父级容器加宽度，高度，zoom:1都能使本来中定位的test box圆点和其他主流浏览器一致，例如： &#60;div style=&#34;position:relative; padding:20px; border:2px solid #F00;height:20px&#34;&#62; &#60;div style=&#34;position:absolute; top:0; left:0; border:1px solid #690;&#34;&#62;test box&#60;/div&#62; &#60;/div&#62; 如图： 注：这里如果加宽度和zoom:1,padding-top:20px和padding-bottom:20px的效果就没了，如图： 如果在实际项目中定死高度的，那么加个高度是很好的选择，但是杯具的是往往很多时候这个高度是自动撑的，那么我还是觉得用hack方式比较好！比如： &#60;div style=&#34;position:relative; padding:20px 20px; border:2px [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1584/feed</wfw:commentRss>
		<slash:comments>39</slash:comments>
		</item>
		<item>
		<title>圆角头像的制作</title>
		<link>http://www.css88.com/archives/1805</link>
		<comments>http://www.css88.com/archives/1805#comments</comments>
		<pubDate>Thu, 20 Aug 2009 05:10:28 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[IE6]]></category>
		<category><![CDATA[PNG]]></category>
		<category><![CDATA[圆角头像]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1805</guid>
		<description><![CDATA[好多sns的头像都使用圆角了，昨天在校内上看到了圆角头像，今天在Qzone的也看到了圆角头像，圆角头像看上去比直角的美观。 圆角头像的制作原理就是在头像上覆盖一张透明的图片，把四个角颜色设置成页面的背景颜色，中间透明， 假设我的页面底色是纯黑色的，那么这个透明图片可以做成这样，如图： 这里需要注意的是需要把图片保存成24位的png，虽然IE6支持8位的png的透明，但是8位的png做透明圆弧图片存在效果上的问题，就是存在白色的杂边或锯齿，如图： ，24位的png或32位的png的圆弧透明（半透明）图片则非常光滑，但是该死的IE6不支持24位的png或32位的png透明(其他浏览器都支持)，需要我们额外的一下处理； IE6下处理24位的png或32位的png方方法有很多，我做了2种： 第一种：使用 AlphaImageLoader 筛选器： html代码： &#60;div id=&#34;circular-box&#34; class=&#34;clearfix&#34;&#62; &#60;ul&#62; &#60;li&#62;&#60;a href=&#34;http://www.sodao.com&#34;&#62;&#60;img src=&#34;jy20090504026.jpg&#34; width=&#34;200&#34; height=&#34;200&#34; /&#62;&#60;span class=&#34;cir-bg&#34;&#62;&#60;/span&#62;&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#34;http://www.sodao.com&#34;&#62;&#60;img src=&#34;jy20090504035.jpg&#34; width=&#34;200&#34; height=&#34;200&#34; /&#62;&#60;span class=&#34;cir-bg&#34;&#62;&#60;/span&#62;&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#34;http://www.sodao.com&#34;&#62;&#60;img src=&#34;jy20090504036.jpg&#34; width=&#34;200&#34; height=&#34;200&#34; /&#62;&#60;span class=&#34;cir-bg&#34;&#62;&#60;/span&#62;&#60;/a&#62;&#60;/li&#62; &#60;/ul&#62; &#60;/div&#62; CSS代码： #circular-box{ margin: 50px;} #circular-box li{ float:left; margin:0 20px; position:relative} #circular-box li img{display:block} #circular-box li span{position:absolute; top:0; left:0;width:200px; [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1805/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>作为一名前端开发工程师居然没有IE6！</title>
		<link>http://www.css88.com/archives/1339</link>
		<comments>http://www.css88.com/archives/1339#comments</comments>
		<pubDate>Thu, 28 May 2009 18:54:52 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[前端工具]]></category>
		<category><![CDATA[IE6]]></category>
		<category><![CDATA[win7]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1339</guid>
		<description><![CDATA[前端开发中少不了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啊&#8230; 现在木有ie6是相当头疼啊&#8230; 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《作为一名前端开发工程师居然没有IE6！》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1339/feed</wfw:commentRss>
		<slash:comments>83</slash:comments>
		</item>
		<item>
		<title>haslayout引起的IE6 :hover失效</title>
		<link>http://www.css88.com/archives/1335</link>
		<comments>http://www.css88.com/archives/1335#comments</comments>
		<pubDate>Tue, 26 May 2009 16:51:41 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[:hover]]></category>
		<category><![CDATA[hasLayout]]></category>
		<category><![CDATA[IE6]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1335</guid>
		<description><![CDATA[大家都知道IE6之支持&#60;a&#62;标签的:hover为了，但是通常在做实际效果的时候&#60;a&#62;标签 :hover在IE6下会失效， 看代码： &#60; !DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;&#60;a href=&#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62; &#60;html xmlns=&#34;&#60;a href=&#34;http://www.w3.org/1999/xhtml&#34;&#62;http://www.w3.org/1999/xhtml&#34;&#62; &#60;head&#62; &#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62; &#60;title&#62;无标题文档&#60;/title&#62; &#60;style type=&#34;text/css&#34;&#62; a:hover { } a:hover span{color:#F00;} &#60;/style&#62; &#60;/head&#62; &#60;body&#62; &#60;a href=&#34;#&#34;&#62;鼠标经过时改变我的&#60;span&#62;颜色&#60;/span&#62;&#60;/a&#62; &#60;/body&#62; &#60;/html&#62; 在IE6下“颜色”根本就不会变成红色，其他浏览器都是好的，要解决这个问题就必须触发a:hover的layout，例如a:hover { display:inline-block}或者a:hover { zoom:1}等等。 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《haslayout引起的IE6 :hover失效》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1335/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

