YUI3中panel基于Visibility属性引发的一个bug
今天维护使用YUI3开发的一个统计网站，本来是想判断是否支持电子签章控件后使其支持不同呢浏览器的上报工作，这样其他的浏览器下也能操作了（但是签章就不能使用了）
不想一测试，其他浏览器登录后首页功能就完全不能正常运行，页面上的li a标签的效果运行的乱七八糟
一开始以为是YUI3代理之类的东西在不同浏览器上表现不一样，测试了半天，都搞不清楚哪里有问题，反正IE下是正常的，firefox,360,谷哥下面都不对
后来在页面上点击a标签查看元素，结果出来的元素居然不是a标签内容，仔细看了半天，原来是一个隐藏的panel里的东西
想了半天终于明白了，原来是页面上我使用了大量的panel，不显示时都隐藏在后面，但是除了IE外其他浏览器貌似页面上的东西虽然看起来正常，但是实际上都被这些panel给盖住了，所以点击、移动等的操作都不正常
一开始想是不是zindex的问题，后来看了下panel的css，panel在隐藏下有css class yui3-panel-hidden样式，此样式定义的是visibility: hidden，我平时是喜欢用display:none的，于是在浏览器里直接改成display:none试试看，这下全部正常了
查了下visibility和display的区别，visibility只是不显示，但是仍然占位，所以那些隐藏的panel仍然占据了视图的位置，而且覆盖了下面的页面，页面事件什么的都被panel挡住了，谁让我喜欢将这些panel居中呢，而display则是从文档流里将对象去掉了
不知道YUI开发组人员有没有遇到过这样的问题，考虑了一下，在自己的css文件里重定义yui3-panel-hidden样式就解决问题了
版权声明：本文为zuxOK原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。