14
Nov
Post on 13:09, November 14, 2009, by Sue Zhou
最近两个项目由于客户的吹毛求疵和自己的强迫症并发而砸了整整两天时间在IE6的美化方面，时间没白费，经验教训皆有。以下分享的一些Tips纯属个人观点：
最好的PNG fix Javascript—- unitPngFix.js
官方网站 (http://labs.unitinteractive.com/unitpngfix.php)
试过十多个不同版本的Png fix，各自的优缺点都很明显，推荐的这个版本至今依然在缓慢而持续的更新着。除了大家都会的修正<img>里的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”）。
11
Sep
Post on 11:38, September 11, 2009, by Sue Zhou
In response to: css3之rounded corner
http://onezhou.com/2009/06/css3-rounded-corner/
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(BrowserDetect.browser=="Explorer"){
$('.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>
30
Jul
Post on 15:29, July 30, 2009, by Sue Zhou
$(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');
}
);
}
20
Jul
Post on 10:10, July 20, 2009, by Sue Zhou
Instead of using onmouseover, onmouseout in each image, use the following function.
Remember to name the images in specific format.
$("img.rollover").hover(
function() { $(this).attr("src", $(this).attr("src").split(".").join("_over.")); },
function() { $(this).attr("src", $(this).attr("src").split("_over.").join(".")); }
);
06
Jul
Post on 10:33, July 6, 2009, by Sue Zhou
推荐个东东，Dropbox，一种结合网络和本地的共享文件夹，支持Windows和Mac，苹果下的支持似乎更漂亮自然一点。
免费用户给2G空间，支持单个共享文件夹的共享设置，对于各项操作有日志记载，适合小团体进行共享。
发现我不太会说中国话了……算了，用用就知道了。
地址：https://www.getdropbox.com/
