糖醋排骨 » anti_ie6 http://interjc.net Thu, 10 May 2012 01:31:44 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 用DD_belatedPNG插件修复IE6 PNG http://interjc.net/archives/2010/07/10/fix-ie6-png-with-dd_belatedpng.html http://interjc.net/archives/2010/07/10/fix-ie6-png-with-dd_belatedpng.html#comments Sat, 10 Jul 2010 10:50:11 +0000 interjc http://interjc.net/archives/2010/07/10/fix-ie6-png-with-dd_belatedpng.html IE6是一个令人作呕的话题，个人极为厌恶IE6，并且恨屋及乌，不过没有办法，中国就是这么一个神奇的国度，到了2010年仍然有不少人以使用“简单、快捷”的IE6为荣，不知道浏览器为何物的也更加不提了，而这种人往往又是互联网中广告点击的生力军，消费能力强，所以你必须照顾到他们的感受。

我对IE6恨之入骨的重要原因之一，恐怕就是对PNG各种半透明的支持情况了。我们在其他浏览器可以轻松实现的图片半透明效果，到了IE6这儿就得纠结蹉跎，虽然IE6勉强的支持PNG-8格式的伪半透明，但这个和GIF图片的效果相差并不大，如果你使用PNG-32的话，你所有的半透明区域都会变成灰底。

网上有不少IE6上实现PNG半透明的工具，各有千秋，大多数使用了IE的一个滤镜：AlphaImageLoader，使用后会有各种诸如问题（比如background-position和background-repeat属性支持的不完善，有些还会擅自更改背景图片的尺寸）。DD_belatedPNG提供了一种新的选择，他使用微软的VML语言对PNG图片进行重新绘制，以达到半透明的效果，并且能支持background-position和background-repeat属性。

查看Demo | 打包下载

其使用方法也不难，先在此下载DD_belatedPNG ，然后插入head标签中：

<!--[if IE 6]>
<script type="text/javascript" src="DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript"> 
DD_belatedPNG.fix('.png');
</script> 
<![endif]-->

将所有需要需要修补的元素加上class=”png”即可

PS：对于:focus和:hover伪类，则需要将以上代码中的 :
DD_belatedPNG.fix(‘.png’);
修改为 :
DD_belatedPNG.fix(‘.png,a.png:hover,.png:focus’);

BTW：虽然这样可以缓解IE6下PNG的问题，不过会带来性能问题，还有一些其他的问题，自然是不如对png半透明有原生支持的浏览器的。所以，赶快让该死的IE6下地狱吧。阿门！

评论

  • 2010/09/05, 夏小淚 说: 我现在都推荐我身边的朋友使用chrome或是FF,有些不会用的，就把IE6直接升级IE8了~！！
  • 2010/09/08, interjc 说: @夏小淚, good job！
  • 2010/09/10, Runescapegold 说: ie6很少有人用了
  • 2010/09/10, 皇家元林 说: 你那个链接前面的图标是怎么加上去的？而且只是链接有，图片没有呢？
  • 2010/09/10, interjc 说: @皇家元林, 神奇吧，哈哈～ jquery+css...
  • 2010/09/10, 皇家元林 说: 能教教我吗？谢谢！
  • 2010/09/10, interjc 说: @皇家元林, 这个说来话长啊，你可以看我的源码中文哦style.css和javascript.js，搜索more-link看相关代码..
  • 2010/11/24, Tao Zhu 说: 想消灭IE6的最好方法就是尽快让XP滚蛋！
  • 2011/11/07, 张垒 说: 加入JS代码后，用IE8打开网页时，提示参数无效。不知道怎么解决，您有什么方法吗？
  • 2011/11/08, interjc 说: @张垒, 这玩意儿只在IE6菜生效啊，检查下你代码的全角半角什么的看看。
Copyright © interjc.net 2009
]]> http://interjc.net/archives/2010/07/10/fix-ie6-png-with-dd_belatedpng.html/feed 10 反IE6代码 http://interjc.net/archives/2009/09/06/anti-ie6.html http://interjc.net/archives/2009/09/06/anti-ie6.html#comments Sun, 06 Sep 2009 15:05:10 +0000 interjc http://interjc.net/?p=494 如果你用IE6访问本站会有一个简单的提示，请你升级浏览器，有兴趣的朋友可以参照一下方法：
打开你的Wordpress模板(此方法同样适用于其他所有支持自定义js以及html的模板)，找到</head> ，在其之前插入以下代码：

<!--[if IE 6]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//anti IE6
    $('#anti_ie6 p strong a').click(function(){
        $('#anti_ie6').hide('slow');
    });
});
</script>
<style type="text/css">
#anti_ie6 {
	text-align:center;
	background:yellow;
	line-height:20px;
	font-size:14px;
	margin:5px 0;
}
#anti_ie6 p strong {
	padding:0 5px;
}
</style>
<![endif]-->

找到<body> ，在其后或其他合适位置添加以下代码：

<!--[if IE 6]>
<div id="anti_ie6"><p>尊敬的用户，您正在使用老掉牙的IE 6.0，我们强烈推荐您升级为<a target="_blank" href="http://bit.ly/2zx2V">符合Web标准的浏览器</a>，更快，更好，更安全！<strong><a href="#">X</a></strong></p></div>
<![endif]-->

保存(上传)，就可以看到效果了。

评论

  • 2009/09/09, Estoremap 说: ie6已经很少了，呵呵，没关系
  • 2009/09/09, jc 说: 我的访问记录有一半是IE6..
  • 2009/09/09, Estoremap 说: 怎么看不到留言了
  • 2009/09/09, jc 说: ???哪
  • 2009/10/14, Google Chrome Frame 来了 | 糖醋排骨 说: [...] 作为一个对IE6深恶痛绝的人来说，这东东确实比较诱惑人，着实激动了一阵。 不过这个东西也不是无懈可击的，他的缺点也正是他的致命弱点——需要用户下载安装控件，而知道这个控件好处的早就不用IE了，至少也不用IE6了，不知道这个控件用途的压根就不会去下载并安装他，说不定还以为是病毒/流氓软件啥的，挺尴尬。希望Google能想个好办法来好好推广一下吧。 话说能不能让这事不由浏览者来决定，咱自己写网页的时候就把这事给办了呢？答案还是有的，不过估计是提升不了什么浏览器性能了，但至少能让IE系列也almost接近标准一把吧，这玩意儿就叫ie7-js，只要下载那个压缩包放在网站随意的位子，然后引用之，就可以解决很多问题了（经测试PNG的半透明效果依然没法在IE6实现），但至少写CSS的时候就省心多了。 也许想要IE6彻底消失，的等到Win7/8/9 出来并出现极其诱人的游戏或者应用吧，期待那一天的到来。 [...]
  • 2010/02/01, GEZ鸽子 说: 学习了！很有用！我也加入反IE6行列了！
  • 2010/02/01, interjc 说: @GEZ鸽子, 恩，IE6相当讨厌..

延展阅读:

Copyright © interjc.net 2009
]]> http://interjc.net/archives/2009/09/06/anti-ie6.html/feed 7