推薦：一張圖片能隱含千言萬語之隱藏你的程序代碼
一個(gè)HTML5的視頻智力游戲,開發(fā)的過程很有趣，我喜歡編程，但當(dāng)實(shí)現(xiàn)了游戲邏輯后，我有了一個(gè)有趣的想法：為什么不想個(gè)辦法把代碼隱藏起來

 
在IE10里，雙擊輸入框或者單擊按鈕都彈出文件選擇框。在其他瀏覽器里單擊輸入框，按鈕或文字都可以觸發(fā)文件選擇框。
鑒于這種混亂情況，有必要要統(tǒng)一樣式和行為。下面是我的兼容性方案。
先看一下最終結(jié)果在各瀏覽器的截圖：

基本思路：創(chuàng)建輸入框和按鈕模擬file上傳控件。將file上傳控件設(shè)置成透明。讓file上傳控件與用于模擬的按鈕右對(duì)齊。修改元素的堆疊順序，讓按鈕處于下面，file上傳控件在中間，輸入框在上面。在文件選擇完畢后將file上傳控件里的值賦給用于模擬的輸入框。
原理：在不同的瀏覽器里，file上傳控件的按鈕的height都是可調(diào)的，而且file上傳控件的右側(cè)都是可以單擊的。所以通過調(diào)節(jié)file上傳控件的height，并調(diào)整file上傳控件的位置（右對(duì)齊），可以讓file上傳控件的可單擊區(qū)域與用于模擬的按鈕完全覆蓋。當(dāng)file上傳控件透明時(shí)用戶單擊用于模擬的按鈕就觸發(fā)了文件選擇框。但同時(shí)file上傳控件的堆疊順序不能先于用于模擬的輸入框，不然當(dāng)用戶將鼠標(biāo)置于所見的輸入框上時(shí)可能會(huì)看到光標(biāo)不是指示文本而是為一個(gè)箭頭（而且為一個(gè)箭頭時(shí)單擊會(huì)彈出文件選擇框），用戶將感到困惑。
實(shí)現(xiàn)：先看看html部分的代碼。

分享：HTML 5 標(biāo)簽、屬性、事件及瀏覽器兼容性速查表 附打包下載
HTML 5 可以說是近十年來 Web 標(biāo)準(zhǔn)最巨大的飛躍。和以前的版本不同，HTML 5 并非僅僅用來表示 Web 內(nèi)容，它的使命是將 Web 帶入一個(gè)成熟的應(yīng)用平臺(tái)，在這個(gè)平臺(tái)上，視頻，音頻，圖象，動(dòng)畫，以及同電腦的交互都被標(biāo)準(zhǔn)化