好久沒發文了，最近公司的案子都好多又好趕。
這陣子除了在規劃案子、趕案子外，另一方面在自學 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 吧：（節錄）
[code language=”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>
[/code]
經測試 IE7,8,9、Chrome 13、Chrome 17、Firefox 都能正常地將 DIV 蓋在 Flash 上，並能正常顯示輸入中文。
若路過前輩有更好的解法請再指教囉 : )