好久沒發文了，最近公司的案子都好多又好趕。
這陣子除了在規劃案子、趕案子外，另一方面在自學 ASP.NET MVC 3 並應用在案子上，有什麼心得會再發文的。

扯遠了，來記錄一下最近案子遇到要將 Facebook 粉絲專頁按讚的按鈕蓋在 Flash 內容上面的問題與解法。

相信很多人都遇過這個問題，我們會將 DIV 設 z-index，然後在 Chrome 中 DIV 會正常地蓋在 Flash 上面，但到 IE8 上面就被蓋住了。
改 wmode=”transparent” 是常見的解法，但在舊版（如 13.0.782）的 Chrome 中便無法切換輸入法為中文（註：測試在 Chrome 版本 17 中無此問題）。
最後我是寫一段 JavaScript 來判斷，瀏覽器是 IE 就多帶 wmode 為 transparent，反之就不帶。

以下是實際的 code。

在這個 Case 中，我們有：

  • 一個 DIV，裡面有 Facebook Like 的 iframe
  • 以 swfobject 方式嵌入的 Flash SWF

直接來看 HTML 吧：（節錄）

<script type="text/javascript" src="js/jquery.js"></script>  
<script type="text/javascript" src="js/swfobject.js"></script>  
<script type="text/javascript">  
var flashvars = {};

var params = {};

// 其實這邊用 JavaScript 也可以寫，用不著引入 jQuery，剛好有他處使用就順便用囉。  
// —  
// 是 IE 就多帶 transparent  
if (jQuery.browser.msie) {  
params = {  
quality: "high",  
wmode: "transparent"  
};  
} else {  
params = {  
quality: "high"  
};  
}

var attributes = {  
id: "flashid",  
name: "flashid"  
};

// 用 SWFOBJECT 嵌入 SWF  
swfobject.embedSWF("root.swf", "Wrapper", "100%", "750", "10","expressInstall.swf", flashvars, params, attributes);  
</script>

<style type="text/css">  
#fb_like{  
position:absolute;  
z-index:9999;  
color: #FFF;  
}  
</style>  
</head>  
<body>

<div id="fb_like">  
<iframe src="//www.facebook.com/plugins/like.php?app_id=112956915500219&href=某個粉絲團的網址&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px; background:#4068a0;" allowTransparency="true"></iframe>  
</div>

<div id="flashcontent">  
<div id="Wrapper">  
</div>  
</div>  
</body></html>

經測試 IE7,8,9、Chrome 13、Chrome 17、Firefox 都能正常地將 DIV 蓋在 Flash 上，並能正常顯示輸入中文。
若路過前輩有更好的解法請再指教囉 : )