今天維護使用YUI3開發的一個統計網站,原本是想判斷是否支持電子簽章控件後使其支持不一樣呢瀏覽器的上報工做,這樣其餘的瀏覽器下也能操做了(可是簽章就不能使用了)css
不想一測試,其餘瀏覽器登陸後首頁功能就徹底不能正常運行,頁面上的li a標籤的效果運行的亂七八糟瀏覽器
一開始覺得是YUI3代理之類的東西在不一樣瀏覽器上表現不同,測試了半天,都搞不清楚哪裏有問題,反正IE下是正常的,firefox,360,谷哥下面都不對測試
後來在頁面上點擊a標籤查看元素,結果出來的元素竟然不是a標籤內容,仔細看了半天,原來是一個隱藏的panel裏的東西網站
想了半天終於明白了,原來是頁面上我使用了大量的panel,不顯示時都隱藏在後面,可是除了IE外其餘瀏覽器貌似頁面上的東西雖然看起來正常,可是實際上都被這些panel給蓋住了,因此點擊、移動等的操做都不正常ui
一開始想是否是zindex的問題,後來看了下panel的css,panel在隱藏下有css class yui3-panel-hidden樣式,此樣式定義的是visibility: hidden,我平時是喜歡用display:none的,因而在瀏覽器裏直接改爲display:none試試看,這下所有正常了firefox
查了下visibility和display的區別,visibility只是不顯示,可是仍然佔位,因此那些隱藏的panel仍然佔據了視圖的位置,並且覆蓋了下面的頁面,頁面事件什麼的都被panel擋住了,誰讓我喜歡將這些panel居中呢,而display則是從文檔流裏將對象去掉了代理
不知道YUI開發組人員有沒有遇到過這樣的問題,考慮了一下,在本身的css文件裏重定義yui3-panel-hidden樣式就解決問題了對象