`

jQuery判断浏览器类型,进而进行css样式调整兼容性

阅读更多
// 判断浏览器类型
	var browserName = navigator.userAgent.toLowerCase();
	var mybrowser = {
		version : (browserName.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [0,
				'0'])[1],
		safari : /webkit/i.test(browserName) && !this.chrome,
		opera : /opera/i.test(browserName),
		firefox : /firefox/i.test(browserName),
		msie : /msie/i.test(browserName) && !/opera/.test(browserName),
		mozilla : /mozilla/i.test(browserName)
				&& !/(compatible|webkit)/.test(browserName) && !this.chrome,
		chrome : /chrome/i.test(browserName) && /webkit/i.test(browserName)
				&& /mozilla/i.test(browserName)
	}


// 使用范例
$(this).css("top", mybrowser.msie ? "-2px" : "-3px").children("img")
				.eq(0).css({
							"cursor" : "pointer",
							"position" : "relative",
							"top" : mybrowser.msie ? "-2px" : "-3px"
						});
分享到:
评论

相关推荐

    jQuery和css3侧边栏滑出式图片介绍插件

    通过jQuery,我们可以编写更简洁、高效的代码,同时保持良好的浏览器兼容性。 **CSS3动画的实现** CSS3引入了许多新的样式属性和动画功能,使得网页可以实现平滑、高性能的动态效果。在这个插件中,CSS3的transform...

    水平线性画廊jQuery相册代码,点击某一张图片后,平滑切换到该图片,兼容主流浏览器.rar

    同时,jQuery库自身已经做了很好的跨浏览器兼容性处理,但在编写代码时仍需注意避免使用某些特定浏览器的私有API,确保代码能在IE9及以上版本、Firefox、Chrome、Safari和Opera等主流浏览器中正常运行。 此外,为了...

    jQuery文字跑马灯插件Marquee

    1. **兼容性**:由于基于jQuery,该插件具有良好的浏览器兼容性,支持主流的现代浏览器以及一些旧版本的浏览器。 2. **灵活性**:它可以控制文字的滚动方向,如上下、左右,还能自定义滚动速度、暂停、启动等行为。...

    jQuery业务审批流程图工具代码

    本项目“jQuery业务审批流程图工具代码”聚焦于利用jQuery技术实现一个业务审批流程的图形化展示工具,特别强调对IE8浏览器的兼容性,这对于那些仍需支持旧版浏览器的开发环境来说具有很高的价值。 该工具的核心...

    jQuery手风琴式焦点图代码,每个图可有多个关键词,点击任何关键词即可使其对应的图放大,点击图片也可使其放大。

    为了确保在所有目标浏览器上的兼容性,开发者需要进行充分的跨浏览器测试,并可能需要使用像`autoprefixer`这样的工具来自动添加CSS的浏览器前缀,或者利用jQuery的`.css()`方法和`.animate()`函数来实现动画效果。...

    jquery-syntax-3.1.1.zip

    6. **兼容性**:作为jQuery插件,它应该与大多数现代浏览器兼容,并可能已经处理了跨浏览器的问题。 7. **使用方法**:要使用这个插件,开发者需要在HTML文档中引入jQuery库、插件的JavaScript文件以及相应的CSS文件...

    jQuery立体感动态导航 jQuery立体感动态导航菜单网页特效.zip

    最后,为了确保兼容性和性能,我们需要考虑浏览器差异和优化。使用Modernizr等库检测浏览器特性,以便对不支持CSS3特性的老版本浏览器进行降级处理。同时,通过合理的事件委托、缓存DOM查询结果等方式提高代码效率。...

    jquery-1.9.1 min doc

    该版本在2013年发布,是jQuery系列的一个稳定版本,旨在提高性能和兼容性,同时保持向后兼容。`min`表示这是一个压缩版,用于生产环境,以减少页面加载时间。 **jQuery API 1.9.chm** 是jQuery 1.9.1的官方帮助文档...

    jquery支持手机触屏的图片轮播效果

    8. **兼容性测试**:最后,确保轮播效果在各种浏览器(尤其是移动端的浏览器,如Chrome、Safari、Firefox等)上表现一致,进行充分的跨平台和跨浏览器测试。 在提供的文件中,`index.html`是网页的主文件,可能包含...

    jquery点击斜切图片展开动画效果.zip

    这样的设计能够使网页在不同设备和浏览器上保持良好的性能和兼容性。 总的来说,"jquery点击斜切图片展开动画效果"是一个结合了jQuery和CSS3技术的图片展示解决方案,通过用户交互触发的动画效果,提升了网页的视觉...

    纯CSS3沙滩伞旋转动画特效.zip

    总结来说,这个资源提供了一个纯CSS3实现的沙滩伞旋转动画特效,具有良好的可定制性和跨浏览器兼容性,对于提升网页设计的趣味性和互动性具有积极作用。开发者可以通过学习和修改这个例子,深入理解CSS3动画的原理和...

    jquery实现截图 里面有例子

    当然,这个实现可能还存在一些限制,比如无法捕获跨域的图片或某些特定的CSS样式,但这是一个很好的起点,可以根据实际需求进行扩展和优化。 需要注意的是,由于安全限制,这种基于浏览器的截图方法可能在某些环境...

    WEB2.0圆形边框css做法.rar

    在网页设计中,实现WEB2.0风格的圆形边框是一种...在不同浏览器间进行兼容性处理是必要的,以确保在所有平台上都能正常显示。在实际项目中,开发者还需要考虑性能优化,避免过度使用JavaScript导致页面加载速度变慢。

    jQuery点击弹出圆圈调色板变换背景插件代码

    此外,还可以考虑兼容性问题,确保插件在不同的浏览器和设备上都能正常工作。 总的来说,这个jQuery点击弹出圆圈调色板插件利用了jQuery的事件处理和DOM操作能力,为网页增加了一项实用且美观的用户交互功能。通过...

    jquery1.6.rar

    4. **CSS选择器的扩展**:增加了对更多CSS3选择器的支持,如`:nth-child()`、`:not()`等,让开发者可以更灵活地进行样式选择。 接下来,`jquery.air`文件可能是一个模拟环境或者工具,用于帮助用户在不部署到实际...

    绿色清新jQuery在线QQ客服.zip

    在使用过程中,可以结合浏览器的开发者工具进行调试和优化,以确保在各种设备和浏览器上的兼容性和性能。 总的来说,绿色清新jQuery在线QQ客服是一个集美观与实用性于一体的解决方案,它利用jQuery的强大功能和易用...

    可拖动QQ在线客服插件,可自定义高度和自定义QQ号码,兼容主流浏览器IE、Chrome、Safair等.rar

    不同的浏览器可能对某些JavaScript特性或API的实现有所差异,因此,开发时可能需要使用像jQuery这样的库来抽象这些差异,或者采用ES5的兼容性写法,确保代码在各个浏览器中都能正常运行。 此外,为了在IE浏览器中...

    jQuery仿3D效果三联切换旋转木马插件

    这种方法在不支持真正3D渲染的浏览器,特别是低版本的Internet Explorer中,提供了良好的兼容性解决方案。 **旋转木马插件** 旋转木马(Carousel)是一种常见的网页组件,用于展示一组可滑动的图像或内容。这种...

    省市县三级联动jquery

    10. **浏览器兼容性**:虽然jQuery库在大部分现代浏览器中表现良好,但在实际开发中,开发者还需考虑IE等老版本浏览器的兼容问题。 综上所述,“省市县三级联动jquery”项目涵盖了前端开发的多个核心知识点,包括...

    CSS3带动画效果的手风琴特效.zip

    例如,为不支持CSS3的浏览器提供备选方案,使用`max-height`替代`height`以避免内容溢出,以及根据屏幕尺寸调整手风琴的宽度和高度等。 总结,CSS3带动画效果的手风琴特效是现代网页设计中常用的一种交互方式,通过...

Global site tag (gtag.js) - Google Analytics