用 Javascript 插入 IFrame 标签，在 Firefox、Chrome 等浏览器上，默认都是透明的，但 IE 有默认的白色背景。

本来，在 html 中写入 IFrame 标签，并加上 allowTransparent="true" 这样的属性，IE 也一样可以透明，但今天的问题是必须用 Javascript 插入。

用 IE Developer ToolBar 测试，在 IFrame 的 src 页面的 body 样式上加上 backgroud:transparent 可以使 IFrame 透明。

但我们要用 Javascript，本域的 Javascript 脚本是没法设置跨域 IFrame 页面的，况且创建 IFrame 的时候还没设置 src，所以这个办法不行。

只能用个土办法，把 src 设置为一个绝对路径的 html 页面，这个页面你自己可以任意编辑，把 body 的样式设成透明即可。

注意，为了性能，只在 IE 浏览器下设置 src，Firefox 和 Chrome 都不用设置。

在这一点上，IE7 跟 IE6 一样弱，比现代浏览器差远了！

开发人员为什么要支持非IE浏览器的四个故事

最近一不小心陷入了对第二次浏览器大战的深思，并参与了几次网上讨论。颇有心得，不知何处分享。下面要讲的四个故事，都是客户（或者你的雇主）对你我（这样的开发人员）讲的故事。来源于生活，高于生活。

1）
你受雇于Z商银行专业版开发团队，不久结识了负责专业版客服的漂亮MM。爱情的滋味让你忘记了工作的烦恼，但是你却清楚的记得那一天走进心仪MM的办公 室，她的老板正在抱怨客户的投诉。原来很多江浙一带的有钱小老板，一直是Z商银行的忠实客户，可是人有钱就有了精神追求，他们这两年纷纷配备了Mac的本 本，有白色的有银色的。。。明白了吧？！现在他们的钱都转存至浦东发展银行和深圳发展银行了。

数据显示，MacBook和MacBook Pro在中国的销量每年都在高速增长，这还没有统计从香港出货而最终用户是大陆人的数量。Mac上人们常用两个浏览器，Safari和 Firefox，Safari非常酷，而且对标准的支持非常好，Firefox插件多，安全性好。最重要的是，如果你已经具有开发IE Web App的能力，那么就已经具备开发标准Web App的能力了。只要有心，万事不难。微软自己也不再喜欢ActiveX了，他们经常游说你们团队用Silverlight。这次，你的老板还会上当吗？ 千万别忘了，这还是微软的私有技术，即使他们承诺Silverlight将跨平台，你也会觉得难用无比，别忘了他们曾经做过让网页设计师谈虎色变的IE for Mac。

前事不忘后事之师。我们能有今天的幸福生活，一要感谢党，二要感谢开放的国际互联网。HTML5，CSS3，以及其它的W3C标准共同组成了我们通常所说 的Open Web。很多人误解了，以为ActiveX是Web安全性的不二选择。其实安全性向来都是开放平台、开放架构、开放源代码远胜于专有平台、专有架构、专有 技术。HTTPS已经非常安全了。选择Open Web之后的最重要工作，就是让每个程序员都有一颗安全性第一的心。

到了晚上，MM完全没有约会的心情了，她一个劲的问你，这两个银行很小啊，根本没有什么研发力量，为什么他们能做的事情，你们不能做？这怎么办？你又不能 认错又不能让MM对公司失去信心，虽然她的信心已经失去了，虽然这根本不是你的错。憋了半天，你只能来一句：“他们不主流，我们不标准。”

2）
你大学毕业不到5年，与朋友一起创业做Web 2.0网站。专家给你们团队的建议是：用户第一，理念第二，技术第三。你非常赞同这一说法。作为主力开发，你非常希望产品能带给用户不一样的感觉，让用户 在第一次就记住这个网站，而不是在浏览器还没有渲染完页面时就关闭页签。你非常羡慕Google的很多应用，简约而不简单，易用性强，速度快。

作为Web开发的老手（还不敢称专家），让我来给你一些建议。第一，你要坚持在团队中宣扬少用图片的口号。第二，使用更多的Ajax异步装载，不断提升性 能，优化用户体验。第三，大量用客户的计算资源，（反正客户的资源丰富而且几乎无成本），减少服务器的压力。第四，宣扬瘦服务器的理念，因为公司小，业务 变化很快，投入服务器的资源不容易变换，如果设计成瘦服务器，成本投在客户端，因为客户端环境单一，全部重来也没有多少成本，容易随需应变。好，我们首先 假设这些建议你已经接受了。

接下来，5年从未遇到的问题来了。由于客户端代码越来越多，越来越复杂，影响了项目进度。老板开始质疑你的这种方式是否可取。再有，公司重金请人做网页设 计，结果你总是提减少图片，设计师不悦，常常产生私人恩怨。更麻烦的是，连你自己都开始担心，因为前端代码常有bug，导致IE弹出对话框，打破了你一直 的梦想。

好吧，既然你能看到这里，我打算教你点绝活。在IE中使用直角矩形，而在Firefox/Safari/Chrome中使用圆角矩形。如果你的设计师喜欢 圆角矩形，就给他/她看Safari中的效果，设计师都喜欢Safari，如果他/她喜欢直角，就给看IE！因为在Firefox/Safari /Chrome中，圆角可以用CSS实现，完全没有贴图。这一招还要用在阴影上。我太太最近还在跟我炫耀她能用CSS3直接实现雕刻字体效果，不过也不是 在IE中。至于Ajax等开发的复杂性，建议你常年使用jQuery和jQuery插件。这个系统的所有API都是跨浏览器的，零学习成本，会用 Javascript就会用，零host成本，因为Google帮你host。这样你可以在Firefox上用Firebug开发，或者在Safari 4里开发（透露一下，Safari 4的调试功能真的超级棒），然后在IE上跑，没有任何问题。2008年年初的调查，jQuery市场占有率不足20%，年末已经过70%了，所以我常把 2008年称为jQuery年，这是国际开发者社群的共同选择。

很多开发人员拒绝非IE浏览器，是因为他们害怕浏览器间的差异，带来开发成本，尤其是CSS上的差异很大。不过别忘了，资本主义世界只要有利润，人们就会 勇往直前。那么多大公司（包括微软）都在奋发图强开发Web App，包括IBM的Lotus产品线，你遇到的难题，别人都遇到过。我们搞开发的就是要站在Google/IBM/Apple这些大公司的肩膀上。

在感受了一次成功的喜悦后，绝大部分开发人员还是会相信：支持非IE浏览器，俺，能跑！！

3）
你大学毕业就进入了一家大型软件公司工作，ERP/CRM是公司的主要产品线类型，工资和福利是你与同龄人相比的骄傲，虚荣心是你参加同学聚会的动力。不 久你升任产品经理，前途似锦。但困扰你的是每次与客户面对面，客户都对你的个人魅力毫无兴趣，而是反反复复的提一个字：“省”！

你花了一个月的时间和客户吃住在一起，通过IT部门了解客户的IT支出到了哪里？尽管如此，客户还是希望你能够拿出一个方案让他们在2009～2010年 经济危机的时候每年节省几百万。怎么办？把客户的员工裁了？还是把你裁了？减少买你们公司软件的支出？（这两年你们公司也不好过，这跟把你裁了是一样 的。）还是减少。。。等等。。。硬件？对，硬件！

一方面，如果客户对新员工和需要更换的笔记本采用Netbook，就可以节约大量成本。另一方面，如果采用云计算的产品，可以把需要支出的服务器端软件改 为租用方式，用浏览器访问。两个方面前后一致且顺理成章。Netbook之所以存在市场就是因为大量的软件应用由Web App取代。新员工只要有浏览器用就可以访问ERP/CRM这些你们公司的拳头产品。

好，于是你再次向客户提出了这10年来全球的IT大公司（除微软）不断向客户提出的建议：Linux。

今天就是尝试Linux的最佳时间。Dvorak，这位以批判大公司出名的IT评论家，现在建议每个人都要尝试一下Ubuntu。真的很好用。你可以不相 信我但是不能不相信Dvorak，他从不盲目追随新技术，加上年龄的原因，他总是比我们这些年轻人对新事物更抵触。据说俄罗斯的国立中小学已经全部是 Linux教学了。你心里的小算盘开始响了，如果每位员工减少本本方面的2000块支出，几百万不在话下。

如果被客户问及Ubuntu不好用怎么办？你嘴角微微一笑，没关系，反正客户大部分时间都只干三件事：聊天、看电影，用办公软件。这些都是Ubuntu的 强项。聊天？QQ和MSN、Skype都支持。看电影，有跟暴风影音一样强的（还不止一个）。办公，OpenOffice存取MS Office格式照常使用。至于你的软件，早就Firefox罗。

怎么？客户还要培训？你挣钱的时候到了。Windows的钱都省了，出点服务费咋了？

4）
年过30的你急于在事业上攀到新的高峰，才能给妻子和正要上小学的孩子一个交代。天赐良机你被一个中型企业挖去做CTO，而你的老板，则是个精明的美国商人。（怎么听起来像小说《最后期限》？）为了拿到VC的钱，老板要求你夜以继日的扩大用户群。怎么办？八仙过海。

大量的软件公司正在尝试把他们最挣钱的产品移植到Web上。这种趋势从2004年就已经开始了。不过用户还是不太喜欢Web Service或者SaaS这样的技术术语，比较讨用户喜欢的概念是“云计算”。然而金融危机到来，VC变得非常谨慎，不见兔子不撒鹰，除了大规模用户数 量的增长，其余免谈。在这个冬季临危受命的你，光靠国内市场是显然不够的。加上笃信《世界是平的》，你决定到全球市场去碰碰运气。无论你是否相信，只要支 持中英两种文字，就支持了全球半数以上的网民。你六级不都过了吗，这有什么难的？

想象一下很多厂商靠iPhone和Android活着。如果让你选择一个作为平台，你愿意选哪一个？呵呵。你猜我选哪一个？Both！其实很多人不知道， 如果做了iPhone的Web App就等于做了Android的Web App，他们是完全相同的浏览器内核Webkit。不相信？那你看看iPhone上的Gmail和Google Reader，是不是跟Android一模一样？以前是不是一直以为Google做了iPhone版？上当了，Google并未用Apple的风格，而是 使用自己的风格，但是看起来易用性一点也不输给本地iPhone应用。更多的喜讯还在后面，Nokia S60也是Webkit，Blackberry上也有Webkit了，Gnome的缺省浏览器很快也是Webkit了。。。

所以，坚持所有Web产品都支持Safari/Chrome的开发团队，获得了史上从未有过的光荣。这不仅是来自VC的青睐，也是直接来自客户的认同，更是钱在向你招手。。。（抱歉我总是想着钱，可谁不是呢？）。。。

Firefox呢？也是不可多得的marketing阵地！因为Firefox插件多，而且非常容易开发。很多小公司靠这个活着呢。因为Firefox的 用户基数大（比IE7大），所以一点细小的易用性改进都能吸引大量用户的眼球。这么多人痴迷与Facebook App和开心App，也是同一个道理。

所以，我们的口号是：支持非IE浏览器，他好，你也好！用户好，投资人好，老板好。大家好，才是真的好！（怎么样？被我雷死了吧。）

结语）

还是前面说的那句话，用户第一，理念第二，技术第三。不要为你的技术找借口。更好的为用户服务就是你的使命。在世界平坦化的今天，把国人的聪明才智展现于世界舞台就是你的机遇。努力的去做吧。正所谓你不下地狱谁下地狱！

欢迎大家续写这些故事和添加故事。谢谢！

不怕危机的泡泡
（转载本文需注明出处：Brian Sun @ 爬树的泡泡[http://www.briansun.com]） 

Activating Browser Modes with Doctype

http://discovery.leakon.com/2009/01/ActivatingBrowserModesWithDoctype.html

对vertical-align这个属性，我总是很头疼，一直没有完全理解，好多问题处理起来很麻烦，没有找到统一的方法。

今天看到了一篇blog，比较深入地分析了这个属性，收藏下来！

原文地址：http://www.mikkolee.com/13

转载如下：

最近几天仔细研究了一下vertical-align这个属性，结果让我大吃一惊，这个很“资深”的CSS标准竟然在各个浏览器里面的表现都各不相同。

vertical-align的值有点多，包括 baseline sub supper top text-top bottom text-bottom middle以及各种长度值（%，em，ex等等）。我先给大家看一个我觉得最夸张的值：bottom。代码如下：

p {
    font-size: 18px;
    line-height: 36px;
    font-family: Tahoma, sans-serif;
}
img {
    vertical-align: bottom ;
}

然后大家看一看这段CSS在各个浏览器中的效果（图片是我故意做成那个样子，为了可以看清楚相对位置）：

呃，这个结果其实很让人匪夷所思，一般我会认为Firefox会比IE解释得更正确，但是看过Opera之后发现它和IE是一样的，而Safari/Win是站在Firefox那边。说实话，我不知道这是怎么回事。

仔细学习了《CSS权威指南（第二版）》，甚至还去查阅了W3C，然后自己做出一个关于vertical-align的图：

按照W3C的定义，当内联元素的vertical-align设置为：

• baseline, top, bottom的时候，都是该元素的baseline（或middle, top, bottom）对其周围元素的相同位置，如图片的top和周围文字的top对齐。
• text-top和text-bottom的时候，是该元素的top（或bottom）对齐周围元素的text-top（或text-bottom）。
• 长度（%, em, ex)的时候，是基于baseline往上移动，所以正数往上，负数往下。
• middle的时候，是该元素的中心对齐周围元素的中心。这里“中心”的定义是：图片当然就是height的一半的位置，而文字应该是基于baseline往上移动0.5ex，亦即小写字母“x”的正中心。但是很多浏览器往往把ex这个单位定义为0.5em，以至于其实不一定是x的正中心（以上图为例，x的高度应该是10px，而em是18px，所以两个值不一样）。

但是，即使是按照上面的准则，各个浏览器的解释如此迥异也让我匪夷所思。我也懒得去研究为什么是这样子。总的来说呢，应该就是它们对字体的每一条线的位置的定义都不大一样，所以这个问题不单跟vertical-align有关，而跟浏览器对内联文本和内联图片的结构的解释有很大关系。

最后给大家一个测试页面，可以方面的看看各个浏览器对vertical-align不同值的解释结果。

http://www.mikkolee.com/weblab/001_vertical/

用JavaScript更新DOM树的节点，先用
element.innerHTML = '';
把节点内容清空，然后再用
element.appendChild(newNode) ;
插入新节点。

本来操作没什么问题，但是在IE6下，完成 DOM 更新后，附近区域内容的显示会出现问题。

现象是，当光标移动到某些链接上时，部分相邻的内容突然消失！

如果在消失的部分点击一下，那部分内容就恢复正常显示，然后上述问题就彻底消失。

以前写过blog说明这类问题的解决办法，不过那次是因为li元素宽度超过了父层容器。我记得好像是用zoom:1的样式表来处理的，详情请看：IE6 float 异常 消失。

这回不是float的问题，是JavaScript造成的。

解决办法用的是给父层容器定义一个绝对宽度，问题解决！