項目中使用WebUploader做的圖片上傳功能，出現一個奇怪的問題，就是頁面第一次加載完成之后，點擊瀏覽文件的按鈕沒有反應。

以下是參考網上的一些說法：

問題的原因大體是這樣，WebUploader初始化的時候，封裝了一個input，type=‘file’。

瀏覽文件按鈕實現原理是一個透明的層，點擊這個層會觸發點擊事件，如果在WebUploader初始化的時候，因為各種原因導致它動態獲取的元素大小有問題，

比如說網上一個網友的說法，初始化的時候因為獲取不到正確的自身或者容器的大小，這時候初始化出來的這個透明層的大小就會是1px*1px，這么小的層，根本點不到。

所以也就觸發不了點擊事件。

以上是網上的資料，我想問題的原因差不多就是類似的情況。我是剛接觸WebUploader，沒有深入研究，不過看官網的演示，以及其余人的實現，這個問題應該已經解決了。

要是還出現這個問題，原因應該是自己頁面的因素比較多。

我這里出現這個問題的最終原因是我上傳所使用的div層，設置了隱藏屬性。我使用的display:none來設置的隱藏。

經過測試，WebUploader的瀏覽文件點擊無效（但是重新渲染一下就可以點擊，比如說按下F12）和這個display:none屬性有關系。

問題原因找到了，就好解決了，元素的隱藏顯示不用display，使用CSS控制。問題解決。

參考：http://www.jb51.net/web/73987.html

{ display: none; /* 不占據空間，無法點擊 */ } /********************************************************************************/ { visibility: hidden; /* 占據空間，無法點擊 */ } /********************************************************************************/ { position: absolute; top: -999em; /* 不占據空間，無法點擊 */ } /********************************************************************************/ { position: relative; top: -999em; /* 占據空間，無法點擊 */ } /********************************************************************************/ { position: absolute; visibility: hidden; /* 不占據空間，無法點擊 */ } /********************************************************************************/ { height: 0; overflow: hidden; /* 不占據空間，無法點擊 */ } /********************************************************************************/ { opacity: 0; filter:Alpha(opacity=0); /* 占據空間，可以點擊 */ } /********************************************************************************/ { position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占據空間，可以點擊 */ } /********************************************************************************/ { zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); /* IE6/IE7/IE9不占據空間，IE8/Firefox/Chrome/Opera占據空間。都無法點擊 */ } /********************************************************************************/ { position: absolute; zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); /* 不占據空間，無法點擊 */ } 
最后補充點自己的感慨：網友的一些答案有時候很有啟發。display:none問題導致WebUploader點擊無效，這個其實在一個問答里面看到過（url找不到了），但是當時沒有多去思考，一看問題和我遇到的不是很貼切就快速瀏覽完關掉了頁面，現在想來，那個網友對這個理解是比較透徹的，而我是走了彎路，回頭來想想才意識到，解決方式已經搜到過。
我走的彎路是排除法，官網演示沒有問題，我自己的頁面有問題，所以我就一點點排除我的頁面。最笨的辦法，先只保留WebUploader上傳，測試發現沒有問題，原因找到，就是我頁面問題。然后逐個的排除我頁面的元素（要在一個什么提示都沒有的頁面，找出來哪里有沖突，感覺就頭大。但是，但是，但是，當你真正動手的時候才發現，困難比想象的要小很多。動手實踐才是王道）。