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

1、

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

涉及环境：IE6/7/8

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

2、

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

涉及环境：IE6/7/8

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

点击阅读全文>>

xhtml mp浅析

很早以前就想了解一下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迷局

一般说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无异于自找麻烦，愚以为如此……

点击阅读全文>>

业内？业内……

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

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

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

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

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

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

点击阅读全文>>

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

当

美国总统奥巴马(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

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

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

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

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

经典版本：Judy Collins

唯美版本：海莉 韦斯特娜

怜子版本：赤池优

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

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

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

点击阅读全文>>

使用高效的html标签

上次测试了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，减少自闭合

拙见待验。

点击阅读全文>>