继续解决YUI3 Panel的yui3-panel-hidden样式带来的问题

上一次通过将yui3-panel-hidden样式增加display:none属性,解决了非IE浏览器下的显示问题,见YUI3中panel基于Visibility属性引发的一个bug

本来以为解决了,结果过了周末再测试时,IE下又不对了,Panel显示后里面的内容全都看起来漂浮在页面上,Panel的背景消失了,看起来就象是panel的内容全部叠加在页面的底上,上周测试没出问题,估计是IE下js和css缓存的缘故。

测试来测试去,我对这个现象很迷惑,因为只是给yui3-panel-hidden样式增加了display:none属性而已,而Panel显示后,此panel的包装div事实上是移除了该样式,应该不起作用才对,但是添加了这个属性就显示不对,移除了就显示正常,很难理解。不使用此属性其他浏览器下又全都不正常(测试包括firefox,chrome和360,明明是使用IE核心的360居然也不跟IE表现一致)

想来想去,只能是通过判断是否IE浏览器应用不同的CSS样式了,一开始想使用css hack,但是考虑这东西还要区分IE的各个版本,从6一直到11,实在够繁的,其他浏览器还要各自处理,就想能不能在脚本里判断是否是IE,然后修改该样式的属性值,但是搜了下,貌似JS里还不能动态重新定义CSS Class,只能采用变通方法了

最后实现是这样的:判断如果非IE浏览器,就给所有有此问题的对象添加个nonie样式,然后给nonie样式应用display:none属性

在脚本的最后地方添加了这样的代码:

    if (!(navigator.userAgent.indexOf("MSIE") > 0)) {
        Y.all('.yui3-panel-hidden').addClass('nonie');
    }

 这就是如果不是IE浏览器,在所有的.yui3-panel-hidden对象上再添加个nonie样式

然后在css里:

.yui3-panel-hidden.nonie { display: none; }

 就是带有nonie的yui3-panel-hidden对象才使用display:none

这样IE和非IE浏览器都能正常显示panel了

 

 

posted @ 2014-03-27 09:10  Zux  阅读(229)  评论(0编辑  收藏  举报