继续解决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了
转载于:https://www.cnblogs.com/zuxOK/p/3627525.html
继续解决YUI3 Panel的yui3-panel-hidden样式带来的问题相关推荐
- safari 浏览器overflow:hidden样式失效,一个css属性完美解决
safari浏览器的样式,总会时不时给你一个"小惊喜". 例如:之前就遇到了safari的一个overflow:hidden样式失效的问题. 百度一看,这个问题遇到的人很多,没想到 ...
- 解决django配合nginx部署后admin样式丢失
解决django配合nginx部署后admin样式丢失 1. 在项目的settings.py文件里添加以下内容: STATIC_URL = '/static/' STATICFILES_DIRS = ...
- IntelliJ Idea及其同系列产品解决网页查看源码Html排版样式乱了
这个问题解决的是一个工具进行几个步骤设置就能解决的了,webStorm ,phpstorm解决网页查看源码Html排版样式乱了一样是这家公司的产品,也可以参照一下步骤设置,即可解决问题 浏览器查看网 ...
- 解决Xubuntu任务栏(Panel)消失的问题
操作失误导致xubuntu任务栏(Panel)不见了,虽然桌面够清爽的,但是不太方便,还是要把Panel给找回来的. 经过网上查找,终于找到解决方法: 按Alt.+F2打开运行程序,输入 xfce4- ...
- iOS 开发 解决UICollectionView的多组头部视图样式不一样复用时发生错乱问题
UICollectionView用起来比UITableView麻烦多了,如何解决多组头部视图复用时出现的错乱问题就很关键 头部视图有几种样式就注册几种头部视图 // 防止cell和头部视图复用出现错乱 ...
- CSS - 解决 “本地测试” 和 “线上测试” 样式不一样问题
如题,基本上我也很少遇到这种情况,但实战中,还真遇到过--解决办法也很简单,只需要在本地样式CSS代码中,处理优先级即可,简单粗暴:"!important".
- 解决微信小程序自定义组件后样式失效不起作用的问题
问题如图: 解决方式: 子页面js的Component()中添加: options: {addGlobalClass: true }, 至此发现样式生效了呢! 我是一条随风飘摇的结尾符~~~~~
- 小程序无缝滚动_使用主题和功能标志无缝解决大型角度应用程序中的样式问题...
小程序无缝滚动 The patient chart in One Medical's Electronic Health Record system is our most feature-heavy ...
- 解决jenkins无法安装插件以及css样式无法显示问题
前言 好久没写过博客了,今天正好有空,聊一下jenkins安装过程中我所遇到的问题,希望也能帮助到大家! 因为项目有个需求是去执行相关财务报表的数据校验工作,所以安排到我负责搭建jmeter+ant+ ...
- 解决Betwin客户机经常无法正常登录带来的困扰
BeTwin是一套基于Windows系统环境下的软件,它可让多个用户同时.独立地共享一台PC机的软硬件及外部资源.....(在这里不废话了,这些内容还是让读者自己去Google吧 :P) 本文的主题是 ...
最新文章
- mysql connector python linux_MySQL Connector/Python 安装、测试
- 【Git入门之一】Git是神马?
- webform开发经验(一):Asp.Net获取Checkbox选中的值
- Java的四种引用,强弱软虚,用到的场景
- 10-异步爬虫(线程池/asyncio协程)实战案例
- yuki翻译器钩子_git hooks钩子
- Android 调用系统相机拍照,生命周期重走OnCreate,导致无数据的解决办法
- 让LYNC 2010 登录OCS 2007 R2
- mybatis--常见的错误
- 阿里云产品专家孟威:SLS 全景体验
- 这种文件别打开, 大小不足1KB, 却可以让你电脑瘫痪
- Arduino使用433MHz RF射频发射器和接收器的方法
- 30ea什么意思_ea阶段是什么?你未必全知道!
- 虚拟机如何进入PE系统
- 商家如何入驻微信小程序
- SQL 分析函数之KEEP
- 创成汇:科技与艺术概念结合在手机上,效果居然这么强?_创成汇
- 阿里云远程桌面无法连接怎么办
- linux下主目录和根目录的区别
- 大英百科挂了,维基百科赢了