页面错误提示：Unable to modify the parent container element before the child element is closed.

查了下资料，知道了问题的产生原因：

首先是微软的详细解释：http://support.microsoft.com/kb/927917

最后发现其实微软的MSDN上早已列举了解决办法：

http://blogs.msdn.com/ie/archive/2008/04/23/what-happened-to-operation-aborted.aspx

官方给出的解决办法如下：

1. Moving your script execution to a function that is invoked after parsing is complete (e.g., onload)
2. Adding the defer boolean attribute to the script block (this defers execution of the script content until parsing is complete)
3. Limiting your tree modifications to the script-element’s immediate parent
4. Moving the location of your script block to a child of the body (this usually solves most problems, while allowing the most flexibility in terms of scenarios).

本来，在 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 一样弱，比现代浏览器差远了！

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

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]） 

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

今天看到了一篇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/

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

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

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

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

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

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