WebUploader 选择图片按钮点击无效问题

项目中使用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上传，测试发现没有问题，原因找到，就是我页面问题。然后逐个的排除我页面的元素（要在一个什么提示都没有的页面，找出来哪里有冲突，感觉就头大。但是，但是，但是，当你真正动手的时候才发现，困难比想象的要小很多。动手实践才是王道）。