最好的PNG fix Javascript—- unitPngFix.js

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

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

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

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

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

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

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

Here is a simple example to create 5px radius rounded corner.

Image part:
corner images
for IE7 and above, using PNG images: corner-tl.png, corner-tr.png, corner-bl.png, corner-br.png
for IE6, using non-PNG instead, or try using Unit PNG Fix (unitpngfix.js) to hack.

HTML part:

<div class="round">
	Massive content goes here.
</div>

CSS part:

.round {
	padding:5px;
	background:#238427;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	*padding:0;
}

.wrap-tl {
	background: url(assets/corner_tl.png) top left no-repeat;
	_background: url(assets/corner_tl.gif) top left no-repeat;
}
.wrap-tr {
	background: url(assets/corner_tr.png) top right no-repeat;
	_background: url(assets/corner_tr.gif) top left no-repeat;
}
.wrap-bl {
	background: url(assets/corner_bl.png) bottom left no-repeat;
	_background: url(assets/corner_bl.gif) top left no-repeat;
}
.wrap-br {
	background: url(assets/corner_br.png) bottom right no-repeat;
	_background: url(assets/corner_br.gif) top left no-repeat;
	padding:5px;
}

jQuery part:

$(document).ready(function(){
	if($.browser.msie){
		$('.round').wrapInner('<div class="wrap-tr"><div class="wrap-tl"><div class="wrap-bl"><div class="wrap-br"></div></div></div></div>');
	}
});

Ideally, the jQuery code will made the HTML code looks like the following in IEs.

<div class="round">
	<div class="wrap-tr">
		<div class="wrap-tl">
			<div class="wrap-bl">
				<div class="wrap-br">
					Massive content goes here.
				</div>
			</div>
		</div>
	</div>
</div>

WordPress的2.8正式版的后台更漂亮点了，用户交互更亲和，虽然在2.7的基础上视觉效果改变不多，升级后突然心血来潮的去IE下看了看效果，发现IE下还是比较难看，虽然还是实现了按钮等rollover的渐变背景效果，但是圆角就彻底被放弃了，IE下效果就是方方正正的一个个模块。想想也许这也不失是一个解决办法──与其花费大把的时间去让不听话的IE漂亮一点，还不如对IE的界面采取另一种相似的设计，丑是丑了点，但是引用我们单位Dave当时说过的一句话 “People who choose IE does not deserve better design. ”

言归正传，本篇的重点是总结一下在各浏览器下圆角的实现方法。现在许多乖浏览器如Firefox, Safari, Opera已经支持CSS3中的某些语句，特别是border-radius这一创造圆句的功能，太赞了，一句CSS代码就解决了头疼的问题，使用方法如下：
CSS3 (not yet finalised)

border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius
border-radius

Mozilla equivalent

-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
-moz-border-radius-topleft
-moz-border-radius

WebKit equivalent

-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius
-webkit-border-top-left-radius
-webkit-border-radius

Opera and KHTML browsers

-opera-border-radius
-khtml-border-radius

由于IE家没有支持CSS3的，所以对于IE下的圆角要另外花功夫。主要用了CSS和png图片及container的嵌套（对IE6，由于其不支持png，各种hacker对png背景图片的处理也不是太理想，于是特别创建了一堆gif图片，不胜其烦），总结了一下代码如下：

（暂时不总结了，下回用到再说吧）

———

Reference: http://www.the-art-of-web.com/css/border-radius/

—-

http://meyerweb.com/eric/tools/css/reset/

解决的办法
由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。比如IE6能识别下划线_和星号*，IE7能识别星号*，当不能识别下划线_，而firefox两个都不能认识。等等。

书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。

比如要分辨IE6和firefox两种浏览器，可以这样写：

<style>
div{
    background:green; /* for firefox  */
    *background:red; /* for IE6  */
}
</style>
<div>我在IE6中看到是红色的，在firefox中看到是绿色的。</div>

<style>
    div{ background:green; /* for firefox */
    *background:red; /* for IE6 */ }
</style>
<div>我在IE6中看到是红色的，在firefox中看到是绿色的。</div>

解释一下：

上面的css在firefox中，它是认识不了后面的那个带星号*的东东是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。

在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;background: red;},于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。

区分IE6，IE7，firefox区别不同浏览器，CSS hack写法：

• 区别IE6与FF：
  background:orange;
  *background:blue;
• 区别IE6与IE7：
  background:green !important;
  background:blue;
• 区别IE7与FF：
  background:orange;
  *background:green;
• 区别FF，IE7，IE6：
  background:orange;
  *background:green !important;
  *background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

另外再补充一个，下划线”_”, IE6支持下划线，IE7和firefox均不支持下划线。于是大家还可以这样来区分IE6，IE7，firefox

• background:orange;
  *background:green;
  _background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。