display:none 小记

我们经常会使用 display:none 来隐藏我们不需要显示的控件(不会占用空间)，但是呢，由于不同的浏览器对这丫的解释不一样会给我们带来麻烦、下面的是我在网上看到的解释： 

原来Firefox、Opera、IE、Chrome对display:none的理解是不一致的。
Firefox、Opera理解display:none中的内容无需在初次加载中显示，所以它们会延后里面的内容加载，甚至在动态改变其display属性为显性的，才进行动态加载里面的内容。
而Chrome和IE理解display:none中的内容需要事先准备里面的内容，好在动态改变其display属性为显性时立刻做出反应，所以其内容会和document其他内容一起加载。
貌似这个特性能够用来异步加载页面，不知道有没有什么可以用来设定，暂时先把这个想法记下来吧~~~

在这里用我自己的一个例子来解释：

需求：使用input text和image(当做按钮使用)来模拟file的上传，(因为file是系统的控件，是不允许对file进行动态赋值的,再者我需要对选择的文件进行类型的校验，当符合时显示正常样式。不符合时显示error样式)

代码：<input type="file" id="file_4" style="display: table-cell; width:0px; height:0px;"οnchange="document.getElementByIdx_x('file_4_upfile').value=this.value;ondeto('file_4_upfile','name_error6')"/>

<input type="text" size="20" style="width:310px;border: 1px solid #acacac;padding: 5px;" id="file_4_upfile" reg= ".*png|gif|jpg|jpeg|PNG|GIF|JPG|JPEG$"  />

<input  type="image" src="images/forms/choose-file.gif" width="75" height="21" οnclick="clickFile('file_4')"/>

红色显示代码是这个问题的关键：当使用display：none时，在IE和火狐下是正常的。在谷歌下是完全没有反应的。因为谷歌是不会去识别这丫的。只能让他显示着。不能隐藏丫的。但是还要使用它，就只能手动修改它的大小了，这样虽然是看不见了，但是呢他会把后面的text往右控件挤压，怎么办呢。加display: table-cell;，问题解决。

一些简单的理解奉上，以此来纪念我蛋疼的一天！！！