我的 Menubar 是一個 [HTML/Javascript] widget，雖然有使用CSS定義，但是臨時想在 Menubar 上，在文字的左側增加一個小 icon，結果圖形和文字老是無法垂直居中。
後來找了了這篇 [藍森林-自由軟件] - 用css怎麼描述圖片align=absmiddle這一屬性？，才總算搞定。
其實我只是在 <img src="" > 中加入 align="absmiddle" 這一串字，其他的詳細說明可以查看 [藍森林-自由軟件] 上的該篇討論文章，因為我目前僅用在 Menubar 的圖形＋文字，的顯示所以沒有定義在 CSS 上。
在 Firefox 顯示上算是搞定，但是卻發現在IE6的顯示上，透明圖形變成不透明了...
在 Firefox 上的功能表：(如設定功能表靠左，透明背景的CSS 圖片也正常顯示)
在ＩＥ６上的功能表：(功能表居然跑到右半邊的中間位置，CSS圖片沒有透明效果)
後來找到了使用Js來讓IE支援png圖片透明效果 這篇文章，按照它的作法，發覺無效。幾經測試才發覺它上面的程式碼有誤，多了一個字 "defer"，刪除之後儲存就OK了。
其實 [CSS] 讓 IE6 下的 PNG 圖片透明 也是一種方式，還是採用 Microsoft 建議的方式。詳細的說明可參閱微軟技術支援服務的【PNG 檔案在 Internet Explorer 中不會顯示透明度】文件說明。
先把相關操作紀錄下來：
- 圖片垂直居中的方式： 在 <img src="" > 中加入 align="absmiddle" 。
- PNG 透明背景的圖片，在IE6 顯示透明背景效果的方式，如下：
- 建立pngfix.js:
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
function fixPNG(myImage)
{
if ((version >= 5.5) && (version < 7) && (document.body.filters))
{
var imgID = (myImage.id) ? "id='"+myImage.id+"'":""
var imgClass = (myImage.className) ? "class='" +myImage.className +"'":""
var imgTitle = (myImage.title) ?
"title='" +myImage.title +"'":"title='" +myImage.alt+"'"
var imgStyle = "display:inline-block;" +myImage.style.cssText
var strNewHTML = "<span "+imgID+imgClass+imgTitle
+" style=\"" "width:"+myImage.width
+"px; height:"+myImage.height
+"px;"+imgStyle+";"
+"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+"(src=\'"+myImage.src+"\', sizingMethod='scale');\"></span>"
myImage.outerHTML = strNewHTML
}
}
- 在模板的<HEAD> </HEAD> 區段中加上如下程式碼：
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
- 在需要透明的 png 的地方 <img src="" > 中加入onload="fixPNG(this)"。
有空在來研究 CSS 在 IE6 的功能表位置會跑掉的問題。
沒有留言:
張貼留言