firefox 3.5.11的一个bug

转载请注明：http://www.html-js.com/?p=673 或者本文地址 

如果你现在用的浏览器是firefox,那么请查看一下它的版本,如果是3.5.11版本的,那么恭喜你,可以亲眼看见一个bug.现在打开这个页面:

http://www.html-js.com/wp-content/uploads/2010/08/firefox-input-bug.html

如果用的是其他浏览器,ie所有版本,chrome, opera,  那么你看到的大致都是相同的景象,那就是六个输入框.

如果你用其他版本的firefox,你看到的应该也是六个输入框,这个我没有测试,但是如果你的firefox是3.5.11版本的,你看到的就不是六个输入框了,而是很多输入框,他们有大有小,各式各样,让人很摸不着头脑,下面就做个分析.

之所以出现这个问题,是因为firefox(下面的firefox都是指3.5.11版本的,至于这个bug维持到哪个版本,我也不清楚,但是3.5.11的确是这样的)在解释type=”hidden”的input的时候,如果设置了特定的css属性,type=”hidden”的input会显示出来,如果设置的属性不同,显示的样式也会千奇百怪.具体代码可以看刚才的demo的源代码,下面看一个分析图:

从上面的分析来看,这种现象真是摸不着头绪,但是如何让hidden的input显示出来还是比较明显的,那就是设置display:inline或者display:block,同时设置border,这时候type=”hidden”的input就会显示出来,至于让它显示成什么样子,可以参照上图.

所以在平常设置css的时候一定要注意,不要统一给input设置各种属性,要针对某个input单独设置,如果不小心给所有input都设置了border和display,firefox就会把hidden的input也显示出来,造成样式混乱,虽然听起来挺平常的,但是这个bug的确被我们遇到了.就应该多注意一下.

哎,如果世界上只有chrome一个浏览器多好啊.