`
jinnianshilongnian
  • 浏览: 21514150 次
  • 性别: Icon_minigender_1
博客专栏
5c8dac6a-21dc-3466-8abb-057664ab39c7
跟我学spring3
浏览量:2420561
D659df3e-4ad7-3b12-8b9a-1e94abd75ac3
Spring杂谈
浏览量:3010293
43989fe4-8b6b-3109-aaec-379d27dd4090
跟开涛学SpringMVC...
浏览量:5640624
1df97887-a9e1-3328-b6da-091f51f886a1
Servlet3.1规范翻...
浏览量:260246
4f347843-a078-36c1-977f-797c7fc123fc
springmvc杂谈
浏览量:1597966
22722232-95c1-34f2-b8e1-d059493d3d98
hibernate杂谈
浏览量:250376
45b32b6f-7468-3077-be40-00a5853c9a48
跟我学Shiro
浏览量:5860636
Group-logo
跟我学Nginx+Lua开...
浏览量:702900
5041f67a-12b2-30ba-814d-b55f466529d5
亿级流量网站架构核心技术
浏览量:785771
社区版块
存档分类
最新评论

Font-Awesome在ie7下不能toggle图标解决方案

阅读更多

问题:

Font-Awesome字体在ie7上不能toggle,原因是Font-Awesome在ie7上使用expression完成显示的。目前网上有很多遇到的但没找到解决方案。

 

解决方案:

比较蠢,采用clone/append完成class的toggle。目前只想到这种方案。欢迎更完美的解决方案。

 

html

<a class="btn btn-link icon-plus-sign"></a>

 

js

$(function() {
    $(".btn").click(function() {
		$(".btn").each(function() {
		    //如果是ie7
			if(/MSIE 7.0/ig.test(navigator.appVersion)) {
				var $aClone = $(this).clone(true);
				if($aClone.hasClass("icon-minus-sign")) {
					$aClone.addClass("icon-plus-sign").removeClass("icon-minus-sign");
				} else {
					$aClone.addClass("icon-minus-sign").removeClass("icon-plus-sign");

				}
				$(this).after($aClone);				
				$(this).remove();

			} else {
  			    $a.toggleClass(openIcon);
                $a.toggleClass(closeIcon);
			}
			
		});

		return false;

	});
});

 

 最后必须return false; 否则会造成ie7浏览器crash掉。

分享到:
评论

相关推荐

    font-awesome-ie7.min.css_fontawesome-4.2.0

    总结起来,Font Awesome 4.2.0版本的亮点在于其对IE7的良好兼容性,`font-awesome-ie7.min.css`文件解决了旧版IE浏览器图标显示问题,配合主CSS文件使用,可以确保在多种浏览器环境下保持一致的图标显示效果。...

    font-awesome-ie7.min.css

    IE9以下版本不支持字体图片库,font-awesome-ie7.min.css解决了这个问题。

    Font-Awesome-4.4.0

    在标题中提到的"Font-Awesome-4.4.0"是一个特定的版本,它包含了一系列矢量图形图标,这些图标可以在网页中作为字体文件来使用,从而提供了一种方便的方式来显示一致且可缩放的图形。 在描述中,提到了这个版本...

    bfont-awesome-4.7.0 稳定版本 下载

    font-awesome-4.7.0 在线版 1.进入 Font Awesome官网 2. 在html中引入文件 3.在网页中直接检查图标对应源码 下载压缩包文件 1.下载Font Awesome安装包. 2. 复制整个font-awesome目录到你的项目 3. 在你的...

    开发工具 font-awesome.min

    开发工具 font-awesome.min开发工具 font-awesome.min开发工具 font-awesome.min开发工具 font-awesome.min开发工具 font-awesome.min开发工具 font-awesome.min开发工具 font-awesome.min开发工具 font-awesome.min...

    font-awesome-4.4.0

    总的来说,Font Awesome 4.4.0 提供了一套强大、灵活且易于使用的图标解决方案,无论是在小规模的个人项目还是大型企业级应用中,都能看到它的身影。其丰富的图标库、良好的跨浏览器兼容性和易用的CSS接口,使得它...

    font-awesome-4.7.0

    1. **矢量图形**:Font Awesome的图标是基于字体的,这意味着它们是矢量图形,可以在任何分辨率下保持清晰,无论是大屏幕还是小屏幕设备,都能呈现出良好的视觉效果。 2. **响应式设计**:由于图标是通过CSS控制的...

    font-awesome-4.6.3资源包下载

    这使得图标在各种屏幕分辨率下都能保持清晰,而且易于缩放和响应式布局。 3. **CSS 类名**:每个图标都有一个特定的CSS类名,例如`fa fa-camera-retro`。在HTML中添加这些类名到元素上,就可以轻松地将图标插入到...

    Font-Awesome-3.2.1

    这种基于字体的图标方法还支持文本级的操作,如改变颜色、大小、阴影等,且无需处理图像缩放的问题,保持了图标在不同分辨率下的清晰度。 在Font-Awesome 3.2.1版本中,可能会包含以下知识点: 1. 图标集合:这个...

    font-awesome-4.7.0 图标库

    总结,Font Awesome 4.7.0是一个强大且灵活的图标库,其矢量图形和CSS支持使得图标在各种场景下都能展现出良好的视觉效果。无论你是网页设计师还是前端开发者,都可以借助Font Awesome轻松地为项目添加丰富多彩的...

    font-awesome-4.7.0.zip

    1. 图标数量:Font Awesome 4.7.0版本包含了675个不同的图标,涵盖了社交网络、通用图标、方向指示、媒体播放器等多种类别,满足了开发者在各种场景下的需求。 2. CSS兼容性:此版本对各种浏览器的兼容性进行了优化...

    Font-Awesome

    1. **矢量图形**:由于Font-Awesome使用SVG(Scalable Vector Graphics)格式,图标在任何分辨率下都能保持清晰,无论放大或缩小都不会失真。 2. **易用性**:开发者可以通过简单的CSS类名直接在HTML元素中插入图标...

    矢量字体图标Font-Awesome相关实例

    与位图图标不同,矢量图标在不同尺寸下都能保持良好的显示效果。 2. **Font-Awesome的工作原理**:Font-Awesome通过将图标转化为字体文件实现,这样图标就可以像文字一样被CSS控制,包括颜色、大小、阴影等样式。...

    iOS Font-Awesome 工具箱.zip

    "iOS Font-Awesome 工具箱.zip" 提供了一个专门为iOS开发者设计的解决方案,使你能够在iOS应用中轻松集成和使用Font-Awesome图标。 Font-AwesomeKit 是这个工具箱的核心,它是一个Swift编写的开源库,允许开发者在...

    font-awesome-图标字体-4.7.0.rar

    Font Awesome 4.7.0版本,适用于QT图标设计、前端网页开发等。上千个图标供你选择。 Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

Global site tag (gtag.js) - Google Analytics