作者mdfh (您真内行)
看板Web_Design
标题让IE支援PNG透明图的方法
时间Fri Mar 24 13:47:45 2006
总之就是让 IE可以使用PNG的透明图档 Firefox的话则是本来就支援
让网页的设计更加自由 (我自己是这样觉得啦 以前都被卡在gif不是0% 就是100%)
据说IE7.0就会支援，但是MS打死不出正式版
原始网站 名称就叫做IE7 XD
http://dean.edwards.name/IE7/
这个javascript还有很多功能，但是对一个纯网页设计的人来讲 这算最实用啦
其他的就留给版上高手来研究了...
把他抓回来後 全部都丢到一个资料夹内
(建议这麽作，因为一开始我想要节省空间，只丢可能要用的 js档，但是怎麽搞都不成功)
然後在需要用到的页面<head> ... </head>之间加入这样
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="
js/ie7-standard-p.js" type="text/javascript" /></script>
<script src="
js/ie7-graphics.js" type="text/javascript" /></script>
<![endif]-->
我在这里是丢进 js的资料夹，所以如果用其他名称要改一下
这样便可以成功使用PNG的透明图
不过在程式预设中， png的档名要有 -trans 才会生效
例如 menu-trans.png
如果想要自由的档名 就把刚刚那第一行改成
<script src="js/ie7-standard-p.js" type="text/javascript" />
IE7_PNG_SUFFIX = ".png";
</script>
当然第二行要保留
开使用没多久後，发现有个问题 图片会随机的"缩起来" 不一定会发生
就像是原本 400*20px的图变成 10*20那样
这是因为我没有为图片设定宽高的关系
所以只要加上CSS设定宽高就OK
ex: <img src="123.png" style="width: 400px; height: 20px;" />
目前用起来是没有甚麽问题，因为手上没有旧版IE所以也不能试多少版以上才能用
这是我用这个方法做的网站(藉机打广告XD)
http://www.ba.ncu.edu.tw/bacamp/2006/index_2.html
出问题的话...直接拆这个网站的原始码来看吧(遮脸)
另外还有一个不知道算不算bug的小问题
如果习惯用外部连结 .css档案
他会读不到 a:hover { ... } 的资讯，必须要写在每个网页档...
这里还有一个国内网友写的解决方法
http://0rz.net/51198
原理差不多，还有懒人产生器 但是比较适合在弄mark时用
--
垂死病中惊坐起 笑问客从何处来
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 140.115.200.224
※ 编辑: mdfh 来自: 140.115.200.224 (03/24 13:52)
※ 编辑: mdfh 来自: 140.115.200.224 (03/24 13:55)
1F：推 gckenny:以前有用，後来决定IE不支援的东西还是别让他出现比较好 03/24 14:38
2F：推 ileadu:十分奇怪，我的png透明图连 IE6都支援啊 03/24 14:43
4F：推 ileadu:真搞不懂为何要做出这麽多复杂的动作 03/24 14:50
5F：推 ileadu:... 你该不会是说「渐层透明」吧？ 03/24 14:58
6F：推 mdfh:是的 而且你那张logo是 GIF伪装的... 03/24 14:59
7F：推 gckenny:有装过IE7嘛？记得IE7移除後IE6会莫名其妙的支援了...囧 03/24 14:59
8F：推 gckenny:忘了说，原po提供的demo网站看起来似乎怪怪的...XD 03/24 15:36
10F：推 mdfh:你的萤幕太大了 XD 我只有做到 1024*768... 03/24 15:49
11F：推 ileadu:如何分辨是否为GIF伪装呢？ 03/24 15:50
12F：推 mdfh:用photoshop打开後 如果layer那里显示index color 就是GIF 03/24 15:52
13F：→ mdfh:当然还是png图档 只不过是用gif的格式来处理之类的 03/24 15:52
14F：推 Azelight:index color 也是可以加入半透明图层的但是很少软体支援 03/24 17:36