Tips of fixing IE6

Sue Zhou — Sat, 14 Nov 2009 13:09:40 +0000

最近两个项目由于客户的吹毛求疵和自己的强迫症并发而砸了整整两天时间在IE6的美化方面，时间没白费，经验教训皆有。以下分享的一些Tips纯属个人观点：

最好的PNG fix Javascript—- unitPngFix.js

官方网站 (http://labs.unitinteractive.com/unitpngfix.php)
试过十多个不同版本的Png fix，各自的优缺点都很明显，推荐的这个版本至今依然在缓慢而持续的更新着。除了大家都会的修正里的PNG图片，选用他家产品的几个主要理由为：

修复PNG图片且不改变原有图片的尺寸，不会出现拉伸图片的情况
可修复PNG格式的背景图片（尽管对于重复属性的背景图片还是会有不同程度的bug，但已经可以简单的通过更改背景图片等简单方法解决）
可以全局修复，也可以仅修复指订图片（via class=”unitPng”)

最好用的字体替换程序 —- Cufón

官方网站(http://cufon.shoqolate.com/generate/)

我到今使用过三种字体替换程序：sIFR, FLIR (Facelift image replacement), 和现在选择的Cufón。下面是各程序的比较：

	sIFR	FLIR	Cufon
编写语言	Flash, ActionScript, JavaScript	PHP, JavaScript	JavaScript
替换	生成swf文件	以单个字母为单位的图片，保存在服务器的cache文件夹内	以单词为单位的图片
配置	配置部分分为js config和css style两部分，用起来其实有点复杂	下载解压后乍一眼看去很复杂，有很多文件（夹），配置文件不难，但有些繁琐。	配置异常简单
优点	不需要独立的字体文件，支持font suitcase这类字体文件包	由于他是把整个字体文件上传到服务器中的，所以对于像中文这类字体文件较大的“大”字体的支持性较好。	文件小，配置简单，对IE6的天然支持性好
缺点	1） load页面时可以看到视觉上明显的字体替换过程──一个明显的页面跳跃。 2）不能直接读取CSS文件，需要在配置文件中另外设置。	1）如果替换的地方比较多会在服务器上生成一堆垃圾缓存图片，访问量如果大的话会占空间。2）生成的字体和原字体很近似，但是不相同，视觉上感觉比较“脆”，字母和字母之间的间距有的较正常略大。对于line-height等CSS属性的支持性还有待提高。	1）和unitPngFix的全局修复功能有冲突 2）目前只支持TTF，OTF类的单个字体文件，不支持字体包 3）对于中文这种字体文件过大的字体，上传生成JS过程会失败。

对于cufon和unitPngFix全局修复冲突的解决办法

对要在IE6中需要修复的图片或背景图片所在的容易中添加（class=”unitPng”）。
由于unitPngFix默认是全局修复，为了避免某一页面中没有需要修复的图片，在footer里（或者其他任何不显眼，不影响布局的地方）添加一张5px×5px左右大小的空白png图片，并添加（class=”unitPng”）。

jQuery: Preset form

Sue Zhou — Thu, 30 Jul 2009 15:29:21 +0000

$(document).ready(function() {
	formPreSet();
});

function formPreSet() {
	/* preset form element */
	$('form [type=text], form [type=password]').addClass('input');
	$('form textarea').addClass('input');
	$('form select').addClass('select');

	$('form [type=submit], form [type=button]').addClass('button');
	$('form [type=submit], form [type=button]').hover(
		function() {
			$(this).addClass('hover');
		},
		function() {
			$(this).removeClass('hover');
		}
	);
}

The Princess Diaries » style

Tips of fixing IE6

jQuery: Preset form