IInterest » IE

IE6下实现png图片半透明的常用方法

Bell — Fri, 13 Nov 2009 09:57:21 +0000

IE6是个”神奇”的浏览器,其原因想必做前端的同行们都深有体会,:)作为我个人而言,最反感的就是IE6不支持除A以外的hover伪类,再一个就是它不支持png图片的alpha透明度.当然此类问题已有众多的解决方案,这里只是总结下自己常用的IE6下实现png半透明的方法以及适用环境.

1.使用滤镜,适用于单一png背景图片的快速部署;弊端:消耗资源比较多,方法比较繁琐.

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ie6下png透明-iinterest</title> <style type="text/css"> *{margin:0; padding:0;} .box{ width:958px; height:512px; background:url(http://image215.poco.cn/mypoco/myphoto/20091114/16/51737245200911141635177073974043057_000.jpg) no-repeat; } .png-bg{width:341px; height:258px; margin:60px auto 0; background:url(http://www.iinterest.net/wp-content/uploads/2009/11/windows.png) no-repeat; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.iinterest.net/wp-content/uploads/2009/11/windows.png'); _background-image:none; } </style> </head> <body> <div class="box"> <div class="png-bg"></div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

2.使用JS(pngfix.js),适用于插入png图片的部署;弊端:pngfix.js会影响到CSS的布局,如demo中img设置了margin,但在浏览时却无效,而且资源消耗较大.

提示：你可以先修改部分代码再运行。

dome中iepng.js下载

3.使用JS(iepng.js),背景图片和插入图片通杀,并可自定义需要png透明效果的容器,适用于复杂的布局环境;弊端:还是资源消耗问题…

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ie6下png透明-iinterest</title> <style type="text/css"> *{margin:0; padding:0;} .box{ width:958px; height:512px; background:url(http://image215.poco.cn/mypoco/myphoto/20091114/16/51737245200911141635177073974043057_000.jpg) no-repeat;} img{ margin:-20px 0 0 10px; } .png-bg{width:341px; height:258px; margin:10px auto 0; background:url(http://www.iinterest.net/wp-content/uploads/2009/11/windows.png) no-repeat; text-align:center; line-height:258px;} </style> <script src="http://www.iinterest.net/demo/js/iepng.js" type="text/javascript"></script> <script type="text/javascript"> GtPNG.fix('div, ul, img, li, input'); //GtPNG.fix 自定义包含透明PNG图片的标签,多个标签之间用英文逗号隔开。 </script> </head> <body> <div class="box"> <div class="png-bg">png-bg</div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

demo中iepng.js下载

针对IE8的HACK

Bell — Tue, 03 Nov 2009 09:08:42 +0000

前段时间费了好大的劲才弄了个伪IE8 hack(关于IE8的HACK)…最近发现原来IE8是存在私有hack的,真悲剧…

background:#ff6600\0; /*IE8 hack*/

测试:

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS阴影</title> <style type="text/css"> div{ width:100px; height:100px; background:#f1f1f1; background:#ff6600\0;} </style> </head> <body> <div>这个盒子的背景在IE8下是橙色的</div> </body> </html>

提示：你可以先修改部分代码再运行。

关于IE8的HACK

Bell — Tue, 20 Oct 2009 15:01:38 +0000

这篇文章悲剧了…请移步针对IE8的HACK

这里介绍的IE8 hack其实名不副实,因为目前我还未找IE8的私有hack,记得beta时期有过,但那些hack在随后的正式版中被修复了,囧.所以IE8的hack其实就是其他浏览器hack的集合…看个例子:

select{ left:-57px; left:4px\9; #left:-57px; _left:-57px;}

left:-57px; 全局定义,所有浏览器都识别 [FF,chrome]
left:4px\9; IE hack,非IE浏览器无法识别 [IE8]
#left:-57px; IE7,6 识别 [IE7]
_left:-57px; IE6 识别 [IE6]

从例子可以看出,先是通过②定义全部IE的样式,再通过③④覆盖定义IE7,6的样式,这样使得IE8的最终解析为 left:4px\9;

虽然复杂了点,但还是可以达到预期的效果…不过最后还是啰嗦一句:Hack就像是止痛药,必要的时候还是可以救急,但滥用的话后果很严重…

关于IE8的兼容性问题

Bell — Sat, 08 Aug 2009 02:24:36 +0000

最近装了win7,体验了下传说中的IE8,作为一个用户而言,IE8的速度和稳定性相对于IE6,7都有很大的提升,但还是存在许多兼容性问题,所以我一直想把win7上的IE8降级为I7,但至今都没有找到方法.如果你跟我一样,或者你喜欢IE8的速度,只是对他的兼容性颇有微词,那么你可以:

点击IE8右上部的”页面”->”兼容性设置”,点选”在兼容性视图中显示所有网站”,或者自己指定也行.

作为web设计师,你也不必对IE8的兼容性问题感到头痛,你只用加一句代码就可以让IE8进入兼容模式

IE下绝对定位的BUG

Bell — Fri, 31 Jul 2009 08:29:01 +0000

项目中经常会用到层的绝对定位,但在IE6,IE7中它的表现却与其他浏览器存在差异,姑且算是一个IE的BUG吧(IE8除外).

先来看看这个BUG的触发条件:

先建立一个简单的模型,一个有固定宽度水平居中的容器wrapper,一个绝对定位的层position-box;这里讨论的是position-box并未设置left,right,top,bottom等属性的情况下的效果,这时候position-box对象会遵从正常的HTML布局规则,在前一个对象之后立即被呈递.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>iinterest</title> <style type="text/css"> *{ margin:0; padding:0;} .wrapper{ width:600px; height:300px; margin:0 auto; background:#FC3; overflow:hidden; } .position-box{ position:absolute; width:100px; height:100px; background:#6CF;} </style> </head> <body> <div class="position-box">1</div> <div class="wrapper"></div> </body> </html>

提示：你可以先修改部分代码再运行。

运行代码后可以看到效果:

IE6 & 7 (下文都以IE7为例)

FF,IE8,opera… (下文都以FF为例)

很明显的看出在IE6,7中position-box的定位是以wrapper容器的左顶点为起始点,而在FF中起始点是浏览器窗体的左顶点(或者说是以body顶点为起始点).

改变一下布局,让wrapper先于position-box载入,这时IE7中的效果就与FF中一致了(这也是与CSS文档中所描述的规则相符的,上面红字部分).

然后我们把position-box放入wrapper中再增加一个向左浮动的层sidebar,让sidebar后于position-box载入,并调整sidebar的浮动方向(float:left;float:right…)看看效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0;} .wrapper{ width:600px; height:300px; margin:0 auto; background:#FC3; overflow:hidden; } .position-box{ position:absolute; width:100px; height:100px; background:#6CF;} .sidebar{ float:left; width:200px; height:300px; background:#d7d7d7;} </style> </head> <body> <div class="wrapper"> <div class="position-box">1</div> <div class="sidebar"></div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

结果FF下,position-box并没改变,但IE7下却受到sidebar浮动方向的影响,也就是说IE6,7的position属性会受到相邻容器布局的同时影响,而非FF等浏览器中只受前一个容器布局的影响,我想这就是IE6,7中呈现出的效果与FF等浏览器中不一致的原因.

那么如何消除这个BUG呢,因为IE6,7会受到上下相邻容器的同时影响,所以先得把情况简单化,就是让position-box最早载入,这样就只会被后面的容器所影响(而在FF中是不会受影响的)再就是就是增加一个宽度100%的容器,这样不管后面的容易怎样布局,position-box都只会被100%宽度所影响,从而将起始点定在该容器的左顶点,最终的效果就与FF等一致了.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0;} .wrapper{ width:600px; height:300px; margin:0 auto; background:#FC3; overflow:hidden; } .position-box{ position:absolute; width:100px; height:100px; background:#6CF;} .sidebar{ float:left; width:200px; height:300px; background:#d7d7d7;} .clear{ width:100%; height:0px; overflow:hidden;} </style> </head> <body> <div class="wrapper"> <div class="position-box">1</div> <div class="clear"></div> <div class="sidebar"></div> </div> </body> </html>

提示：你可以先修改部分代码再运行。