Cutsin受难记

IE中opacity与png图像alpha通道冲突2例及解决办法

2010-04-28T14:40:00.001+08:00

1、

现象：在包含alpha通道的png图像/背景元素上应用alpha(opacity)滤镜，会将透明区域显示为黑色

涉及环境：IE6/7/8

解决办法：使用alphaimageloader载入png；

2、

现象：如果一个元素同时应用了alpha(opacity)滤镜、并使用alphaimageloader载入png，那么在此元素的实际显示区域中，所有元素的背景/背景色都会失效

涉及环境：IE6/7/8

解决办法：为被"吃掉"背景的元素增加alpha(opacity=100)

xhtml mp浅析

2010-03-01T16:06:00.002+08:00

很早以前就想了解一下wml和wcss，借助春节假期的间隙，阅读了nokia xhtml指南和相关文献，感慨良多，这真是一次迟来的阅读。
网上的各种重复资料太多了，写一点自己的感想和总结：

一、基础概念
wap的发展基本上也是经过了一个从私有到规范的过程，目前的wap2.0应该说是从协议到描述语言，逐渐在向有线互联网靠拢，它终端的基本构成是xhtml mp和wcss，二者的关系就像html之于css；
xhtml mp基于xhtml basic的定义并扩展（包括支持wcss）、wcss则是css2的子集并进行私有扩展；
最大的优势是向规范靠拢，这样wap站点任何支持规范的终端都可以正常访问并应用。

二、xhtml mp
既然靠拢了规范，它势必摒弃了一些"不规范"的旧有特性，如：
1、deck、card、do、anchor、timer、等其他xhtml不允许的标签和应用逻辑
2、不支持非标准事件、变量、客户端脚本、锚点数据
3、必须要有xml声明，这一点不是很确定，从web得来的经验告诉我们：教条不可信，需要更多的测试和阅读。
总之，可以说xhtml mp是完全遵照w3对web的成熟定义，熟悉web开发的人可以很快上手，几乎不需要什么过渡过程，可能在不同终端的处理上尚需经验，但的确是门槛甚低。

三、wcss
除了语法相同，它提供了可和web媲美的大多数属性（包括float和支持有限的position），并且提供不少相当有用的私有属性，这些属性和值以"-wap-"为前缀，例如：
1、-wap-accesskey：3（*、#、0-9），它使用规范的方式代替了之前的<do>
2、-wap-input-format 它可以定义输入格式
3、-wap-marquee 它可以按照相应的规则卷动元素
看起来这些属性并不和表现相关，仿佛违背了分离的思想，不过讽刺的是：css提供的这些属性，实际上是相当实用，而我们却只能通过className去模块化地使用它们。

四、兼容性
wap平台的浏览器对比pc更加杂乱，除了几大厂商五花八门的浏览器，还得考虑诸如MTK等山寨os的私有浏览器；
对前端而言最直接的影响就是：
1、font-family、font-style等字体属性显得无用，因为不少终端只有1-2种字体并且兼容性不好
2、各种布局属性（包括基本的width、height）的支持千差万别
3、js的支持比例一半一半
4、一切全靠测试、折腾...
复杂的终端导致我们只能从GUI设计阶段着手简化，用尽量简洁的设计生成尽量简洁的页面，以尽量小的容量提供给尽量小带宽的下载用户，这就引出此文的第五部分：

五：设计优化、可访问性、可用性
这套流程看起来很熟悉：
1、压缩xhtml、css，缩短各类明明，减小页面大小，这主要是因为终端的缓存限制，以MTK为例（我的山寨机就是），似乎超过20KB的页面就会导致报"下载页面过大"之类的错误，根本无法浏览；
2、图片压缩，尽可能采用jpg、gif、png-8，尺寸也不宜过大，在小屏幕终端上进行横向卷动是非常困难的事情；
3、屏幕尺寸以及导航的设计需要考量，尽量减少装饰性图片或背景；
4、灵活可变的布局，减少卷动
5、导航清晰、减少主要功能死角
总之，一切为了accessibility和usability

值得深思的是：nokia文档中有许多关于用户习惯、可用性、可访问性的描述，甚至包括许多类似"根据可用性研究，用户不太热衷于那些由于图像传输而中断他们任务流的服务"的细节，而此文档的初稿时间是2002年7月，译文时间是2004年5月，04年同期事件是：国内web标准化的呼声刚刚崭露头角，而当时国内的UCD研究亦处于起步阶段...

六、其他
1、关于css的放置
有不少资料建议将css放置在页面中，不要使用外部链接，理由是link会产生额外的请求，而且全站的css如果都在这一个文件中的话，文件会比较大，影响速度；
不过我觉得，如果每个页面都带有css，如果用户浏览了2、3页，那和使用link没什么区别，而且浏览得越多，下载的多余样式越多，而link一般会进入缓存；
再者，wap站点和web站点不同，它没有类似门面主页的存在，除非特别需要首页打开速度（比如资讯类等不需要登录的站点），选择将link放入页面相对较小的首页反倒是个不错的选择。

2、xhtml mp的未来及展望
xhtml诞生以来的最大意义就在于它提出的一种标准、一种强制规范，几乎不会有什么终端、设备会尝试以xml的方式读取xhtml，它的xml特性几乎从未被我们所用到，html5的出现更是令xhtml非常尴尬，那未来的移动设备会采用什么方式呢？我觉得随着终端机能的增强和带宽的提高，除了xml源及阅读器，仍然会是提供富交互的html和脚本，互联网跨平台的日子不远了……

3、关于builder、ria的必要性
从第五条关于设计的优化原则可以看出，根本不需要什么builder、js，所有的页面、逻辑都和程序环环相扣，3G时代又如何？我们不可能无视一半的用户比例，所以，在很长一段时间内，wap页都会长得大同小异，更丰富的无线应用，只能暂时在无线客户端中绽放……

X-UA-Compatible迷局

2010-01-06T13:51:00.002+08:00

一般说IE流行着这几个版本：6、7、8以及未来的IE9，而事实上随着X-UA-Compatible的出现又增加了“IE8 as EmulateIE7”、“IE8 as Standard IE7”；

让人困扰的是：后2者仍然有着和纯IE7不同的表现，而微软总会用各种方法引诱你去打开兼容性视图：
1、让开发者们增加X-UA-Compatible强制指定
2、如图：

我们很难（不愿）通过hack再去区分它们，绝不能用错误的方式去解决错误的问题，还好微软同时提供了禁止兼容性视图的办法：
http://msdn.microsoft.com/zh-cn/library/cc817575.aspx
如果说IE8是IE向行业标准靠拢的里程碑，那没有理由不使用：
<meta http-equiv="X-UA-Compatible" content="IE=edge">

如果原来使用Emulate有千百种理由，那么在新产品、新项目中不使用edge无异于自找麻烦，愚以为如此……

业内？业内……

2009-11-11T11:29:00.001+08:00

今天花了不少时间看reader，从华尔街到枣报，又从枣报到业内博客……

然后就看到51js和蓝色的人在互喷，牵涉非常多的老版主、"业内名人"等等，主要是围绕一本书的推介，而关于主角"css8"，刚好我曾在蓝色web标准区多次遇到，对此人的技术和言语浅有了解，遂来了兴趣……

看这个文章可知始末：《炮轰<JavaScript征途>，兼批技术社区的吹捧之风》

然后有人发了篇文章《一些技术图书编写、推荐、出版人员需要自重》

最后，这是一个写书评的版主的补记（之所以记得这个蓝色的版主，只因他曾以"请言之有物"为理由删过我们几个朋友对另一个朋友大作的跟贴，而我看了看同一帖内剩余的跟贴却同样是言之无物，而区别仅仅是他们都是些有身份的人，如"荣誉管理团队"、"版主"等等，�~~，这就是所谓只许xxxx，不许xxxx）

老实说，看到这么混乱，我有一点兴奋。

读报：奥巴马访华解决新摩擦应对“大”问题

2009-11-10T10:04:00.001+08:00

当

美国总统奥巴马(Barack Obama)抵达上海开始他为期四天的对华访问之时，展现在他面前的将全部是标准的迎宾仪式和访问场景。他将会见高层领导以及平民百姓；本地媒体将满是他的报导；所发表的讲话也将此尽是些诸如"远景"和"合作伙伴"这样的词汇。

不过，他在中国受到的欢迎将不会像在其他国家所受礼遇那样热烈，他在其他国家通常被视为一个变革人物。

Getty Images

这是因为即将从11月15日开始对亚洲进行八天访问的奥巴马将大体延续此前政府的对华政策。他还将面临一些长期问题在两国间造成的新摩擦，同时他及中国领导人必须应对已堂而皇之地登上中美峰会议程的一干国际问题。

中美关系上的成功普遍被归功到了前一届政府头上。在克林顿(Clinton)时期所取得进步的基础上，布什(Bush)政府深化了中美贸易关系，扩大了两国交流并以和平方式解决了争端。这个被中国人称为"小布什"的总统在这里广受喜爱。

乔治华盛顿大学(George Washington University)国际关系学教授大卫・肖姆博格(David Shambaugh)说，中国几乎是布什总统在国际事务领域取得的唯一成功；因此奥巴马一上任就继承了十分坚实有效的中美关系。

不过，奥巴马在入主白宫后限制了部分中国产品对美出口，引发中方似乎是针锋相对的回应。中国对贸易争端尤为敏感，因为它的经济增长高度依赖出口领域。

AP Photo/Charles Dharapak

今年9月美国总统奥巴马与中国国家主席胡锦涛在纽约会面。

这影响了奥巴马在中国的受欢迎程度，同时也有观点认为奥巴马在修复美国金融系统做得不够──中国之所以担心这一问题是中国是持有美国国债最多的国家。

十年前，在中美峰会上讨论最多的问题仅限于以下三个：人权、防止核扩散和贸易。现在双方议题已经扩展到几乎涵盖世上所有主要问题，从清洁能源到阿富汗战争、非洲发展、再到如何修复全球经济，预计所有这些问题都将在奥巴马和中国国家主席胡锦涛的对话中占有一席之地。

华盛顿布鲁金斯学会(Brookings Institution in Washington)研究员、曾任前总统克林顿(Bill Clinton)亚洲事务特别助手的李侃如(Kenneth Lieberthal)说，在中美关系史中，全球事务首次成为最主要的议题；这对我们来说是一个新的领域。

双方的分析人士都认为这种变化可能带来问题。中国官员和分析人士指出，美国仍在对中国实施武器和高科技禁运；他们说，这可不是对真正的伙伴做的事。清华大学国际关系教授阎学通说，奥巴马希望我们成为战略合作伙伴或朋友，但我们既不是战略合作伙伴，也不是朋友，我们是分享物质利益而非共同价值的商业伙伴。

乔治华盛顿大学的肖姆博格说，美国最近力促中国成为全球伙伴，这可能是30年来不切实际的期望伴以大失所望这一模式的一部分。他说，我们对中国的期望过高，我们的政治制度和价值体系都迥然不同。

这一点反映在如下事实中：尽管两国关系称得上是处于有史以来的最佳状态，双方讨论的大部分问题却也比以往更加棘手。

举例来讲，美国很可能至少会暗示中国应该进一步升值人民币。中国则很可能礼貌地加以拒绝。双方将一致认为不应该扩散核武器，不过不太可能在应对朝鲜、伊朗或巴基斯坦问题的切实措施上取得一致。而至于气候变化协议，双方都希望等下个月的哥本哈根峰会之后再做出承诺。

所有这一切都将使奥巴马之行难以达到划时代的高度。人民大学教授、中美关系资深观察家时殷弘说，另外一个因素──国家的大小──也在发挥著作用。与美国一样，中国也是一个幅员辽阔的国家，相对不容易受到外界影响。

他说，中国不同，外国人很少能对其产生重大的影响。

Ian Johnson

来源：华尔街日报

涤荡你的心灵――Amazing Grace

2009-09-20T12:12:00.002+08:00

翻出压了许久未看的柯南剧场版《战栗的乐谱》，之前剧场版质量的每况愈下让我对此作的期望并不高，然而看罢之后忽然感到很欣慰，虽然仍然不是什么大手笔大场景，但对场景分镜的的细腻把握、对人物心理的刻画、有分寸的特写以及音乐恰如其分的烘托，让看惯了柯南老套推理的我眼前一亮：原来柯南还可以这么拍。

不需要错综复杂的剧情，不需要扣人心弦的悬念，需要的只是一种感觉，一种舒服的感觉，它让内心放松、心灵涌动而不显煽情

纵观整个故事都围绕着一个主题：宽恕

它让弱者变强、强者低头，它来自凡人内心，又似乎被赋予永恒，它不是歌，它是凡人的祈祷、真诚的忏悔，这就是――Amazing Grace，作者约翰牛顿（非Isaac Newton），版本太多了，试听了几个版本，推荐如下：

经典版本：Judy Collins

唯美版本：海莉韦斯特娜

怜子版本：赤池优

不过个人还是喜欢简单干净轻柔的版本，不喜欢杂乱的混音、和声，虽然主音符就那么几个，但简单才是真谛，剧中悠扬延绵的小提琴声让我不禁想将世界三大乐器尽数拥有，钢琴么，让老婆弹:P

I once was lost, but now I"m found ,was blind, but now I see

不知是否在给踌躇的我以启示……
而启示往往是隐晦而宽容的，选择仍在自己。

使用高效的html标签

2009-09-19T11:24:00.002+08:00

上次测试了float和position元素的显示效率，那么就留下一个问题：
平时应该多用哪些标签、显示属性应该如何设置呢？
遂补充一些测试数据如下（仍是不严格测试、53100个同级元素，浏览器是chrome）：

div的显示属性：

display:block 1.x秒

display:inline-block 27.x秒

display:inline 5.x秒

默认标签：

div 1.7x秒

p 1.2x秒

span 6.x秒

i 5秒左右

b 5秒左右

q 6.x秒

a 5.x秒

重置默认标签：

q:before,q:after {content:''} 6.x秒

span:before,span:after {content:'\22'} 7秒左右

div:after {clear:both;display:block;height:0;content:"\20"} 2.6x秒

从数据上也许能看到一些端倪：

1、推荐的显示属性：

block > inline > inline-block

2、文档的大小也有很大关系，显示属性相同的情况下，推荐使用短小标签：

(i,b,p,a) > (em,hx,ul,ol,li,dl,dd,dt) > (div,ins,del,var,dfn,sup,sub,pre) > (span,q,cite)

3、伪类的content，即使设置为空，也会消耗资源

4、减少<img>

5、减少嵌套

6、减少float

7、设置doctype为html，减少自闭合

拙见待验。

尽量避免使用float(浮动)和position:absolute/fixed

2009-09-13T15:05:00.002+08:00

一直误以为position的效率比float低，并在之前的一个项目大量应用float并使用了许多float相关的奇技淫巧，上线后发现页面速度并不理想，当时以为是该产品UI设计比较复杂，图形太多的缘故，并没有想太多，这次开始新项目，强制要求8秒载入，痛心疾首要对产品的加载速度做优化，前端页面自然首当其冲，这时忽然想到比较一下float和position的性能，简单改了下以前的一个<a
href="http://www.moonless.net/demo/9/">例子</a>，测试方法是载入53100个同级div，分别设以不同的样式，用onload看载入时间，以下是测试结果：
position:static 2.012秒
position:relative 2.124秒
position:absolute 191.422秒
position:fixed 187.606秒
float:left 未响应……

display:inline-block 31.221秒
faint...
我猜到了大约情况，却没料到是这样的结局，自我反省中……

<a href="http://www.moonless.net/demo/9/haslayout.zip">演示下载</a>

顺便赞一下chrome，比firefox快不是一点半点；
另外，以上测试在IE中除了float:left，均在3秒左右，IE中如果使用{float:left:clear:both}，不会出现未响应，载入在30秒以内

关于RO纯水、小分子团水、长期饮用水的一些资料搜集

2009-09-03T17:06:00.001+08:00

刚装了RO直饮纯水机，无杂质，口感微甜，ph值听说在6.5-7左右，感觉还不错，而后却从朋友那了解到小分子团水的概念，遂对自己的选择产生了质疑：
faint，是不是花了钱却没买到健康，我得补补课了……

google了不少资料，关于小分子团水的介绍大多是商业说法，没找到确实可信的材料，不过从wiki和一个叫中国净水行业委员会的民间组织（看它的网站还是有点山寨的感觉）找到了一些数据，应该相对比较可信，摘录资料放在最后面，供参考查阅。

网上有些区别小分子团水和普通水的方法，其中有一则是将水和植物油混合在一起摇匀，普通水不能和油混在一起，油是油水是水，而小分子团水则会和油互相混合，我回家试了试，RO纯水也可以啊……（后面上图）
考虑到比较浪费油，所以没试普通水是不是也会出现这种现象:D

RO纯水中的小气泡：

RO纯水和植物油：

wiki资料：

纯净水，简称净水或纯水，是纯洁、干净，不含有杂质或细菌的水，是以符合生活饮用水卫生标准的水为原水，通过电渗析器法、离子交换器法、反渗透法、蒸馏法及其他适当的加工方法制得而成，密封于容器内，且不含任何添加物，无色透明，可直接饮用。市场上出售的太空水，蒸馏水均属纯净水。有时候这个词也和化学实验室中提炼的蒸馏水或雨水通用。

纯净水最代表就是R.O, 其实人体所需要的矿物质很难从水中得到，不排除水中的矿物质是有好的，但非常地少，若要从水中摄取矿物质，每天都要一大缸的水才能足够摄取人体所需要的矿物质的分量，人体的矿物质是由食物得来的，相反地水中有很多有害物质是对人体有害的

资料0（出处）：

现状和机理
1、水分子由二个氢原子和一个氧原子组成，三角形结构，结合角为105°。
2、水分子团结构是一种动态结合，即不断有水分子加入某水分子团，又有水分子离开该水分子团。
3、水分子团的大小与水的温度、离子浓度、pH值、外界施加的能量都会对水分子团结构变化有影响。
4、水到达沸点时，大部分以单分子（H2O）形式存在。当外界影响（能量）撤离并一段时间后，由于氢键作用，又可能回复到原来的分子团结构。

结论
1、水的分子团结构在动态变化。
2、国际上任何水质标准都没有水分子团的指标，也没有水分子团测试方法标准。
3、“小分子水”对人体健康的影响缺乏令人信服的临床医学报告和科学鉴定。
4、卫生部对“小分子水”及其制取装置不发卫生许可批件。

资料1（从google快照找到的资料）：

中国民（私）营经济研究会净水行业委员2008年年度工作报告:
对使用假批件的企业进行网络曝光；对能量杯事件进行网络讨论；对小分子团水的虚假宣传中央台曝光；对无批件的净水器鼓励企业举报等。
举例：小分子团水在中央二台曝光后，有数家宣传小分子团的企业来向秘书处咨询，在秘书处多次以专业知识的引导下，取得了他们的认可，改正了他们的经营理念，合法合理经营，现在的产量和销售额比以前翻了倍。

资料2（出处）：

如何看待小分子团的水？
目前，有许多厂家宣扬自己的净水设备制出来的水是小分子团的水，如何有益于人体的健康。那么到底存在不存在小分子团的水？《2007年中国净水行业蓝皮书》作出了以下回答：

1、水分子由二个氢原子和一个氧原子组成，三角形结构，结合角为105°。

2、水分子团结构是一种动态结合，即不断有水分子加入某水分子团，又有水分子离开该水分子团。

3、水分子团的大小与水的温度、离子浓度、PH值、外界施加的能量（如：电场、磁场、声波、射线、红外线、压力等等）有关，它们都会对水分子团结构变化有影响。

4、当外界影响（能量）撤离一段时间后，由于氢键作用，又可能回复到原来的分子团结构。

5、水喝到胃中后，由于胃内的温度、PH值、离子浓度等影响，喝下去的水的分子团结构会发生变化。

通过以上几点可以得出如下结论：

第一、水的分子团结构相当复杂，还有待深入研究。

第二、任何水质标准（中国、外国）中，都没有水分子团的指标，也没有水分子团测试方法标准。

第三、号称“小分子团水”及其制取装置，目前尚无足够的、公认的科学依据，没有可靠的实验数据和论证，因此，所谓“小分子团水”有益于人体健康，缺乏令人信服的临床医学报告和科学鉴定。

资料3（出处）：

正常饮用水，无须强调酸碱度
今年农夫山泉着实火了一把。
随着“天然弱碱性水，更适合人体饮用”口号的打响和揭开康师傅矿泉水并未采用优质水源而使用的是普通的自来水层层净化的真相，农夫山泉在2008年不仅销量大增，而且影响了千千万万个消费者。走进终端，净水产品的专柜前面，普通消费者通常提出的第一个问题就是“出水是弱碱性水吗？”消费者络绎不绝，这样的问题却大都类似，甚至有的人在一听到你回答是否定的时候立即调头就走。
不同意见意味着广泛的注意力，印证了农夫山泉新广告的成功。与最初“农夫山泉有点甜”的广告相比，“碱性水”概念的提出，不仅再次强调了农夫山泉与其他饮用水的不同，而且富有健康内涵。对越来越注重饮食健康的消费者来说，这样的营销策略显然是“正中要害”。
农夫山泉最近提出的“pH试纸测水”广告引来不同意见。
医学专家指出，普通人没有必要专门去饮用弱碱性水。
卫生专家提出，水的pH值与人体健康的关系目前并没有得到证明。
最困惑的莫过于普通消费者了，不知道喝酸性水是否意味着对身体有害。
《生活饮用水标准》规定，PH值在6.5—8.5之间都是适合人体饮用的标准。
人体的胃液是一个酸性环境，无论饮用的水是弱酸性还是弱碱性，一进入胃中，马上会变成酸性的溶液。而且如果一直强调喝强碱性水，酸碱一中和，冲淡胃液，则影响正常消化功能。
人类对饮用水的要求，不应该一谓无知地强调弱酸性还是弱碱性，没有污染或者已经去除污染的水才是好水。

资料4（出处）：

揭开酸碱水的真相
摘自《中国净水行业委员会 2007 年蓝皮书》
首先，来让我们了解一下水质标准中的 pH 值指标：
①世界卫生组织（ WHO ）：低 pH 值有腐蚀作用，高 PH 值影响味觉，为使加氯更为有效，以 pH ≤ 8 为宜。
②美国 EPA （环境保护署）：一级水，没有具体指标；二级水， 6.5 ~ 8.5 。
③欧盟（ EC ）： 6.5 ~ 9.5 。对于瓶装或桶装的净水， pH 最小值应降至 4 ~ 5 。
④我国 GB5749-2006 ： 6.5 ~ 8.5 。 GB17323 瓶装饮用纯净水， 5.0 ~ 7.0 。
很多天然的好水是偏酸性的。如：广西省武鸣县大明山岽寺淡泉， pH 为 6.7 ；浙江省杭州市虎跑泉， pH 为 5.8 。
因此，以偏酸性还是偏碱性来划分水质的好坏是不科学的，要以是否符合水质标准、水中的杂质及其受污染情况来决定水质的好坏。
水是喝到胃里，胃的环境是酸性， pH 约为 2 ~ 3 。不管你喝什么水，喝到胃里后， pH 值都会改变。
对于饮用水 pH 值来说，符合标准的水都可以饮用，不存在喝碱性水好还是喝酸性水好。水是既不致酸、也不致碱的物质，“喝碱性水好”完全是不成立，是无依据的、不科学的误导。

PS：没有找到多处提及的《2007年中国净水行业蓝皮书》，有机会应该看一看。

家里新装纯水机

2009-09-02T10:56:00.002+08:00

家里新装纯水机，总共买了3台，其他2台要拉到父母家自己装……
但这东西挺复杂，我已经忘了怎么装了-_-b

出水龙头：

另外两个准备拉到PDS和怀柔的未开箱纯水机，我还在发愁到时候怎么装呢……

左侧是1微米PP棉，右侧是5微米的，中间是什么忘了……
哪个是后置活性炭、RO滤芯等等也都忘了……
不过白色的球状物是压力桶，纯水制好了就存在这里面：

【工作方式分享】多次复制/粘贴

2009-09-02T10:47:00.001+08:00

不便场景一：
正在ctrlC/ctrlV某篇文章，忽然想粘贴刚才copy过的某段文字，但剪贴板只能保存一次copy，刚才那个文章的网址又忘了……
郁闷啊……

不便场景二：
编辑网页源码，看到有这样一段路径：
/group2/images/logo.gif
想看这个图片是什么样，于是复制了之后粘贴到地址栏，然后切换回来再复制域名(http://i.chinaren.com/group)想拼成完整的url：
http://i.chinaren.com/group2/images/logo.gif
……
晕啊，刚才粘贴到地址栏的东西怎么没啦～～
郁闷……

解决方案：
其实有很多工具可以实现多次复制/粘贴操作，下面以clipx为例介绍一下多次复制的方便之处：

clipx个绿色软件，直接解压放到某个地方就ok，它有许多设置选项就不多说了，直接看效果：

在保持clipx运行中的情况下，我们复制一段路径：

然后再复制主域名：

接着在新的地址栏中先按ctrl+v把主域名粘贴好，之后在输入光标处输入win+v，此时出现一个历史列表：

用键盘上下或鼠标选择所需内容即可。

下载

【工作方式分享】快速切换hosts，不用重启浏览器

2009-09-02T10:35:00.002+08:00

工作中可能经常遇到需要设置hosts访问目标服务器的情况，通常的流程可能是：
1、手动修改hosts内容
2、保存
3、关闭浏览器
4、打开浏览器
5、刷新

如果经常需要修改就比较累，自己用笨办法简化为：
1、点击切换hosts
2、刷新(IE)或点击刷新(FF)

具体方法如下：

一、安装

1、解压文件，运行init.bat

2、在任务栏的空白处点击右键，会弹出如下菜单

3、选择“工具栏”->“新建工具栏”

4、在弹出的资源管理器中找到你的C:/windows/system32/drivers/etc目录，然后确定

5、这时在任务栏就会出现etc文件夹，旁边有个箭头，点击就会出现菜单了。

二、“原理”
其实就是在etc文件夹生成a、b两个文件，其中b文件为空，a文件就是你原来的hosts文件；
内网.bat就是用a文件覆盖hosts文件；
外网.bat就是用b文件覆盖hosts文件；
你可以自行修改a和b文件的内容，当然自己再做一个c、d、e等等也可以，不过相应的你还得自己增加内网c.bat、内网d.bat等等

三、如何切换
想访问内网时就点内网.bat，想访问外网时就点外网.bat……

四、切换之后浏览器的操作
如果你用IE，直接F5或Ctrl+F5刷新即可；
如果你用firefox，首先需要有这个插件：https://addons.mozilla.org/zh-CN/firefox/addon/7408，装完之后会在右下角出现一行ip地址，如图所示，当切换hosts之后，用鼠标点击ip地址即可。

如果你用chrome，请关闭再重新打开吧……

比较啰嗦，抛砖引玉吧……希望大家也分享下自己的工作技巧哈～

nth-child和nth-of-type以及last-*的区别

2009-08-26T15:56:00.001+08:00

其实区别很简单：
“with the same expanded element name”

而last-*简单理解就是倒序：
“after it in the document tree”
默认是：
“before it in the document tree”

计算方法同样是an+b-1，并允许取值为odd或even，看演示

详细介绍：http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

IE interpolation(图片插值模式)管窥

2009-08-19T11:43:00.003+08:00

有同事email提议：

产品的用户头像在IE下看起来很糙，可以利用“双三次插值”方法对图片已经处理，让它看起来柔和一些。IE7本身就有这个私有属性，我也火星一下，才了解到，不过对我们产品的细节有帮助，可以看看给需要优化的图片加个样式，改善在IE7下因缩放造成的失真。
样式属性：-ms-interpolation-mode:bicubic
我拿新班级首页代码试了下，挺明显的，为了测试效果直接作用于所有img标签了，img{-ms-interpolation-mode:bicubic;}
效果对比见下图：

隐约记得年初时看到过相关介绍，使劲回忆了下为什么当时没有应用的原因：还是效率问题

这个interpolation（插值模式）没有默认值，只有nearest-neighbor（近邻取样/仿色）和bicubic （双三次插值）两个值，后者效率较低。
虽然说是没有默认值，但msdn上却有一句话：
If the zoom level of the page is 100%, the default interpolation is nearest-neighbor, otherwise bicubic mode is used.
也就是说，当你缩放网页时（Ctrl+滚轮或查看->缩放），只要不是100%，图像的算法就会变成双三次插值，所以应该可以理解为IE7默认的插值算法就是临近取样；

然后，IE6不支持缩放，所以和它无关；
IE7呢？请参考附件截图（nearest-neighbor.png, bicubic.png, none.png），F5刷新页面瞬间，默认和指定临近取样时cpu 占用都在70%左右，而双三次插值则到了97%甚至100%；
而IE8默认就是双三次插值，cpu 占用始终在60%左右，这时再指定临近取样也是生效的，而且能看到cpu占用的降低；

所以从IE7默认不打开双三次插值这一点来看，也许微软觉得IE7默认执行不太靠谱，尤其是元素比较多的情况，所以让我们自己权衡……

于是除了附件中的截图，又做了个小试验，初衷仍然是：“好在它是个style属性，可以自行指定想在哪些元素上应用，效率应该还是可以控制的”
然而结果很无奈，cpu的占用会随着你应用双三次插值元素数量的增加而增加……截图中那个页，一半数量的成员头像开启双三次插值就让cpu飙到了94%

以上cpu占用数据都是指刷新/打开页面的瞬间，并且在虚拟机中测试。

虽然个人还是倾向于对某些需要着重显示的图片如此处理（比如相册大图、幻灯效果之类），
但仍可以多做测试，看是否能正式在产品中应用以改善在IE7的显示效果。

再次鄙视一下IE6、7

循序渐进、温故知新，热情人生却有悲怆结局

2009-07-09T16:48:00.002+08:00

每月不到几个小时的吉它练习已跌跌撞撞步入G大调，同真理的一般规律一样，循序渐进、温故知新这八个字在人生不同的阶段、不同环境总能远远地在前方对你展现出狡黠而深邃的慧光，有所悟，不可求

为什么人生要在不断地尝试、温习这恼人的轮回中度过，好容易攒足了一定的脑水又全化为枯骨。
为什么现时的欲求满足、自我实现总洋溢着某种悲怆的味道。

Pure Love是支很好的歌，但很后悔看了它的MV，这听起来明明是首节奏欢快热情洋溢令人心暖的曲子，而MV居然是这样的故事、这样的结局……也许这是人生真谛的部分影射

事实上把自己压抑在某种心情里是种很享受的事情，理智也许不是正确的，迷失未尝不是种解脱，沉沦也自有它的妙处
抓住温软的现实，给尚能回忆的自己留下足够多的热情欢乐，让人生洋溢幸福是自己最弥足珍贵的力量，不要吝惜自己的身体，驱使它去碰触让自己灵魂颤抖的东西吧……
ba ra la la la la ba la la la, cause this is pure love...

好久不找歌了，推荐歌曲3首

2009-07-09T10:40:00.010+08:00

刚听到的快歌：
Pure Love - Arash feat Helena - 试听

这首《Pure Love》是伊朗天王Arash与法国天后Helena合作的醉人单曲，有着浓郁的异域风情。浓郁的异域风味.曲风跳跃洋溢，有着大家熟悉的印巴线条，略带吉普赛的狂放.Arash是伊朗流行音乐界炙手可热的人物，不仅在中东地区拥有数量可观的粉丝，连世界上最难俘获的美国歌迷，都被他的音乐折磨地神魂颠倒，不少金发碧眼的美国女孩，放着安稳的日子不过，不惜冒着生命危险，踏进战火连天的中东地区，就是为了见到Arash一面。Arash到底有何魅力，能让全球歌迷拜倒在他的伊斯兰短裤下呢？首先是他异常神秘的作曲和编曲功力无人能敌，其次是他充满磁性的声音可以很有效地激发人们的听觉神经，再次是他异域黑马王子的帅气形象和善良的本性。他歌颂爱与和平，不管是在他的祖国伊朗，还是在花花世界美国，他都始终坚持着自己的信仰，在这个喧嚣迷乱的娱乐界，Arash靠自己的赤诚和实力赢得了人们的认可。
转自：http://www.foolren.com/viewarticle.asp?id=647&page=2

两首慢歌：
1、Oh Dear - Sophie Zelmani - 试听

Zelmani十四岁的时候拥有了她的第一把吉他，她的父亲教她和弦。差不多十年以后，开始陆续将自己录制的小样寄给各家唱片公司。索尼公司第一个给了她答复，并且把她介绍给曾和Ulf
Lundell与Bo Kaspers Orkester合作过的创作人兼吉他手Lars
Halapi。在与Zelmani的合作中，Halapi负责编曲，他把Van
Morrison风格融入到她的新专辑中，这也许是他最出色的地方。不过词作者都是Zelmani，她的柔和清澈的嗓音给人一种甜而不腻的感觉。1995年冬天，专辑打入流行榜单第四名，不久便在瑞典和日本大卖。
从1995年开始，来自瑞典这个北方国度的甜美清新邻家女孩苏菲珊曼妮，便以生活化、发自内心真诚的诗意词句，简单干净透澈却能直接触摸隐藏在心灵深处纤纤情感的音乐，而征服了瑞典、欧陆甚至亚洲的广大歌迷。Sophie的音乐之所以能像她的人一样，情感纤细、纯净亲切而动人，那是因为她的歌直接纪录了她的成长心路历程。最新作品Sing
And Dance，仿佛用音乐来回忆着过去那些在情感正要愈合，然而一旦触碰到还是会带来疼痛的伤口，那沁凉萧瑟绝美的意境，就是这么让人愈听愈沉醉其中而难以自拔
转自：google音乐

2、Decrocher Les Etoiles - KerenAnn & Benjamin Biolay - 试听

她出生在以色列，从小学吉他时就开始学习Joni
Mitchell的曲子，11岁举家迁往巴黎后竟然得到了JoniMitchell的赏识而结识了着名制作人Benjamin
Biolay，后者的古典音乐背景为她的作品带来更丰富的编配层次。2000年KerenAnn的首张专辑 LaBiographie De
Luka Philipsen 融入了俄国文学、犹太民谣和法国诗歌，并以Trip-Hop、民谣及法国流行乐的融合形式现身，一举在欧洲赢得巨大成功。一曲
Jardind’Hiver 更是惊动了80高龄的法国Bossa
Nova鼻祖HenriSalvador，后者在自己的经典复出专辑Chambre Avec
Vue中收录了包括Jardind’Hiver在内的5首由BenjaminBiolay和KerenAnn创作的曲子。
KerenAnn是个用法语歌唱生活的女孩，她的民谣实在“清新”，和古老的传说联系在一起，和远去的岁月里绵绵的小故事牵手，直接承载于简陋的乐器声中。然而，从第二张专辑La
Disparition开始，KerenAnn在民谣中加入了更多爵士和布鲁斯的元素。
转自：维基百科

稳定访问被墙的blogger、youtube甚至google的方法

2009-06-18T17:01:00.005+08:00

同事: www.google.cn的服务器在国内，不会被盾，所以可以用它当代理，因为是官方的，速度极快。
可以使用代理自动配置脚本，这样就可以做到只针对blogger和youtube这两家网站使用代理，其它网站直接连接，不影响浏览速度，不去来回切换。

最近google.com也常被墙，索性把google.com也加进去了……

function FindProxyForURL(url,host){
if(dnsDomainIs(host, ".blogspot.com")){
return "PROXY 203.208.37.160:80";
}
if(dnsDomainIs(host, ".blogger.com")){
return "PROXY 203.208.37.160:80";
}
if(dnsDomainIs(host, ".youtube.com")){
return "PROXY 203.208.37.160:80";
}
if(dnsDomainIs(host, ".google.com")){
return "PROXY 203.208.37.160:80";
}
return "DIRECT";
}

附使用方法：
把以上脚本存为proxy.pac，放到某盘(如e)，勾选浏览器代理设置中的“使用自动配置脚本”，填入“file:///e:/proxy.pac”

浅析ie6 css expression效率、覆盖原理、优先问题

2009-04-01T11:12:00.007+08:00

通常expression就是不标准、效率低、消耗大、不稳定的代名词，原因大家都知道，很早以前就知道用简单的表达式和重置可以克服这个问题，但由于以前一直规定不允许用expression，所以也没细看是怎么重置的，知道最近看了old9去年的文章才略知一二，其实原理很简单，无非就是利用级联的规则重新赋值，从这个例子可以看到，ie6仍是按照css的级联规则来决定是否、何时执行expression，而expression的执行次数除了事件之外，和它所能作用的元素的个数有关，重置其实是为html标签增加style属性（Inline Styles），而Inline Styles优先级通常是最高的，所以内部样式、外联样式定义的expression不再执行，也就达到了我们的目的：减少expression多次执行带来的灾难。

个人觉得对于IE6这种东西，用简单的expression修正一些不舒服的bug是完全没有问题的，比如：

IE6不缓存背景图的bug：
body {_zoom:expression(function(x){document.execCommand('BackgroundImageCache', false, true);x.style.zoom=1;}(this))}

没有max-width、max-height，ie6对于元素的高宽难以限制，也可以用这种方法；
有人会说用脚本更好，但举个例子吧，我们都遇到过图片缩放问题，用户上传了分辨率超大的图片，如何限制在一个较小的区域内并且等比缩放呢？用脚本缩放会出现一个情况，在网络较慢的时候，页面会先显示一张大图，然后瞬间被缩放，图多的时候尤为明显，IE6中onload事件对这个点的判断不太准确，这里有两个例子：

1、haslayout渲染与不渲染时，onload的区别
2、expression、onload、window.attachEvent的执行次序

所以，如果要将图片缩放到75*100，可以这样，思路是先加载，再处理：

img {max-width:75px;max-height:100px;_zoom:expression(function(x){var w=x.width||x.offsetWidth,h=x.height||x.offsetHeight);if(w>75&&75*h/w<=100)x.style.width=75;if(h>100&&100*w/h<=75)x.style.height=100;if(x.style.width!=''||x.style.height!='')x.style.zoom=1}(this))}

但事实上这样的效率也不怎么样，要给所有img赋style.width/height并判断，最后才取消expression；
==2009.4.4补充==============
用expression处理图片不稳定，img onload与否不好判断，还是不建议这么用。
============================
另一种流行的解决方法是用脚本，思路是先处理，再加载（查看示例）

在允许使用expression的前提下，适度使用还是可以的，退一步说，IE6早晚都消亡，应该给IE6的用户培养这样一种感觉：“IE6效果不好、速度慢，升升级是不是好点……”囧~

八卦：google也许要在3月30日推出新产品？

2009-03-26T10:22:00.003+08:00

来源：http://www.neo-biz.com/?p=235

有人说google马上要发布的产品是p2p方面的，想想还真有可能，这有篇相关文章：http://www.bitscn.com/pdb/java/200605/21556.html
而且之前google也谴责isp限制p2p是非法的，哈哈

不过为什么是30日，不是我们想当然的4.1呢？不过希望不是八卦，不管是p2p还是gdrive，都不错，强烈期待中……

CSS实现限制行内字符的最大长度且超长能加省略号

2009-03-10T15:04:00.006+08:00

网友“14px”提供了一个思路，很妙，以前只想到用换行、限高截断字符以避免出现半个字，但没想到用背景出省略号，呵呵，赞一个

但原帖的方式太复杂，恐怕不够实用，并且由于firefox尚未支持word-wrap和wrod-break，所以类似这种字符（“借某人名字nangongruiyangsdf打”）在firefox中会整体换行，显示结果就是字符和省略号之间出现空白-_-

不管怎样，把以前的一个例子改造一下：http://www.moonless.net/demo/20
但这样加省略号的缺陷还是很明显的：对非宋体无能为力，中英文混排效果也不理想，权当研究，也许以后有更好的方法。

word-wrap跳票到firefox3.5了……

2009-03-10T13:43:00.002+08:00

https://developer.mozilla.org/En/CSS/Word-wrap
同时在thunderbird中获得支持。
其实word-wrap已经成为css3的属性，并且受text-wrap的影响。

IE6/7 hasLayout导致cursor有时变为text或失效的bug

2009-02-17T13:46:00.004+08:00

先看例子：http://www.moonless.net/demo/15

可以看到：
例一中空白区域鼠标指针变成了文本状（cursor:text）；
例二中本应来欲指定元素中鼠标样式为手形（cursor:pointer），但却没起作用；

觉得这应该是个bug，是触发了元素的hasLayout造成的，怎么修复不太清楚，但以下方法可避免：
1、尽量不要触发hasLayout
2、指定非transparent的background
3、让它float
4、让它包含在一个float的元素里（即使不是直接包含）

对img行间对齐以及vertical-align:middle的探讨

2009-02-04T17:55:00.005+08:00

对于vertical-align:middle，w3的解释很简单：
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

这个x-height的定义是：
The x-height is so called because it is often equal to the height of the lowercase "x". However, an 'ex' is defined even for fonts that don't contain an "x".

单位“ex”的定义是：the 'x-height' of the relevant font，按理说如果选定了字体，x-height应该比em和px更靠谱，但操作系统、浏览器、字体版本等等各种各样的因素导致我们无法信任以字体为出发点的表现处理；

所以middle实际上应该是对齐到基线上方1/4倍ex的位置，但浏览器的处理各不相同，尤其是中英文混排的时候，虽然有人提出如下方案进行补足（如果认为1ex=0.5em，那应是0.25em，但考虑到中文的情况，修改为0.2em）：

img {vertical-align:middle;margin-bottom:0.2em}

但烦人的是随着系统环境的不断升级，如果你的用户很巨量，你要面对的新旧版本差异范围会越来越大，兼容or不兼容，这是个问题……

鉴于所有市面上的操作系统和浏览器都是中文苦手的，中英文混排时对line-height、baseline、x-height计算的混乱不是它们的错，更不是我们的错，而宋体5.0的出现和IE8的“文本模式”提醒我们：不能再跟这些属性较劲，一切交给浏览器去处理吧（把出错的原因都推给浏览器吧……@_@）

4400插曲:a place in time, worry about you

2009-01-23T15:41:00.003+08:00

科幻剧有很多，但叙事风格有如在你耳边娓娓道来、节奏舒适、比较深沉、有内涵的类型除了斯导的《天劫Taken》大概就是《4400》了，和《Heros》、《超人前传》的花哨以及《StarGate》、《Lost in space》的硬科幻相比，有很多对人生意义和人性的探讨，但可惜的是，由于种种原因，第3季开始剧情变得有些平庸，在收视率以及同类剧集的压力下，第5季终于被砍……
非常可惜啊，我想看到结局……
这其实是非常优秀的一部美剧，片首曲和插曲的意境非常好，推荐欣赏：
http://www.youtube.com/watch?v=DMBcyt_CRM4
http://www.youtube.com/watch?v=68vpChfsQWI
最后，怀念一下主角Tom Baldwin

Eminem - Stan Feat. Dido & Thank You

2009-01-23T10:59:00.003+08:00

《Eminem - Stan Feat. Dido》很早以前就在听，今天偶尔看到了它的MV：http://www.tudou.com/programs/view/Lp1_g9qFpf8/

背景音乐“Dido - 《Thank You》”出自 Dido 1999年的专辑“No Angel”，这首MTV获得了2001年度MTV 音乐录影带大奖最佳女艺人的提名。
http://www.youtube.com/watch?v=_1CjbcqhGyU