博学乃学识渊博，知道的多，了解的广。堂乃我们之集体。博学堂以提高我们整体的知识为目标开展活动。博学堂为前端开发者和网站设计者提供了一个交流分享的平台。一起分享代码的乐趣，总结项目的成长，展望新技术的发展。

博学堂是国际站UED内部的分享平台。专注于知识分享、工作交流、成果推广等领域，致力于构建自由、开放、互助的分享环境。只要你敢喷，我们就给你提供舞台！ 自愿参与，广泛的话题，充足的时间，充分的自由！

简单列举了曾经的分享主题：
1. JIRA系统应用：Jira系统是优秀的项目管理与工作流跟踪软件，目前已经在UED全面部署应用。

2. JS开发心得：主要分享在大图预览与智能联想开发过程中的编程思路、难点解决方案。内容涉及： 图片缩放及拖拽预览解决方案； 模块化编程的应用思路； 探讨如何保证复用性的同时，使程序具备一定的扩展性。

3. 异步上传组件：异步上传组件的设计思路及其布署方案。

4. 大图预览及其组件设计，内容有：A 封装用prototype JS，甚至iframe都动态生成;B 只有放大超出区域才启用拖动，且拖动限定范围;C 拖动启用半透明预览/虚线框定位平滑过渡效果;D 放大缩小加入动画效果;E 长按平滑放大/缩小效果实现,增量增加比例;F 放大比例条

5. UED在项目中的流程框架

6. 前端利器之 Fiddler

7. Unicorn基于High Performance Web Sites的最佳实践

8. UED图片格式，压缩处理

9. 阿里巴巴国际站前端核心框架结构讨论会

10. WordPress分享等

以上更多的只是简单的和不完全的列举，博学堂为阿里巴巴国际站UED积累了很多宝贵的资料和分享，接下来希望这样的交流能够有更多的人参与进来，并且可以分享到更多的人。

在D2上我们曾交流过某项具体的前端技术，也曾探讨过团队协作的方式，那些美妙的话题都深入到我们频繁敲键盘的指尖。回首我们过去四年的坚持和梦想，现在是时候分享我们的积累和成果了。当架构、安全、性能等等在前端的领域扎根的时候，我们自己也在悄然发生质变，而推动这些变化的人和事正是D2想告诉你的。

• 本届主题：蜕变·成长
• 论坛时间：2009年12月19日(星期六)
• 论坛地点：杭州市滨江区网商路699号, 阿里巴巴B2B园区 （地图）
• 举办单位：阿里巴巴
• 特别致谢：CSDN、JavaEye、谋智网络、百度、豆瓣、华章图书、口碑网、
  蓝色理想、腾讯网、图灵教育、淘宝网、支付宝。
• 官网地址：d2forum.org
• 推广视频：http://v.youku.com/v_show/id_XMTM2NDI0MDU2.html
• 报名地址：http://www.d2forum.org/d2/4/sign_up.html（截止时间：2009.12.14 0:0:0）
• 日程安排：
  

  时间	主题	嘉宾
  08:45 – 09:15	入场
  09:15 – 10:15	《模板语言与大前端》	金大为（百度）
  10:30 – 11:30	《从YUI2到YUI3看前端的演变》	张克军（豆瓣）
  11:30 – 13:00	午饭/休息/参观（阿里巴巴免费提供午餐）
  13:00 – 14:00	《SilverlightQQ项目实践——Silverlight架构思考》	甄焱鲲（腾讯）
  14:15 – 15:15	《前端安全概览及防范》	吕峰军（淘宝）
  15:30 – 16:30	《前端性能优化与自动化》	鄢学鵾（口碑）
  16:30 – 18:00	交流互动

  注意：以上安排可能会根据具体情况进行一些补充与修改。

产品列表结构图（png太牛B了只有18K）

我想绝大多数UEDer都不会使用如上布局来实现这个模块，首先想到的当然是使用DIV[productItem]做4 × n次的循环，然而这个布局却使用程序控制每四个DIV[productItem]给它们套一个DIV[productListRow]。可能很多人都已经发现了，这个布局有一个先天性的不足，也就是前文提到的“某原因”，那就是由于产品简介的长度不同导致每个DIV[productItem]的高度不同，因此需要在每行列表后面都清除浮动以让浏览器可以做出正确排列。那么解决办法也就出来了，很简单，有如下几个：

1、最方便、最有效、性价比最高的方法就是我们当然可以知道最长长度的产品名称和产品简介，因此我们分别取这两个值排满的最高高度来作为DIV[productItem]即可，但是这个方法却有致命的缺点导致所有UEDer都不会这么做得，那就是当出现有人不填写产品简介或者产品简介填写得非常少的时候便会出现大段的空白严重影响观看阅读。

2、那就这样把，咱把“产品简介”给拿掉吧，然后使用方法1便可以完美解决问题了。这个想法非常牛B，可是它太牛B了，我绝对不敢这样操刀直接把这么重要的内容给砍掉（也许有人觉得这些内容并不重要，但是这不是这篇文章所要讨论的东西）。我对曾经抱有次想法表示遗憾和羞愧。

3、为什么不使用table布局呢？天哪我觉得这简直就是最完美的办法了，table一出八马难追的。能够自适应高度的table在这个应用上拥有绝对的优势啊，如果前端开发工程师们可以放下一点架子在html上使用它原本应该使用的结构该是多么美好的事情，我直到在写这篇博客的时候依然觉得使用table解决问题又快又省力还很有快感哦~（其实原代码中的div布局就是抄袭了table的“思想理念”了）

但是作为一个在非常牛B的UED团队的还是菜鸟的我为了要做出非常牛B的事情也为了团队的面子，怎样也不能使用上面三种投机取巧的办法来敷衍这个现实的问题吧，因此就有了这篇博客最重要的内容。

第一次尝试：

首先我们还是来考虑考虑到底使用什么标签来写这个列表吧，所谓back 2 base嘛。重新分析列表中最重要的元素有且仅有：标题、图片、简介。显然标题是最重要的，作为一个product的title存在，而图片和简介都是用来描述标题的内容，因此第一个想到的标签就是dl，这样便有了以下布局（抱歉还没有时间整一个代码输入）：

<dl>
<dt>[name]</dt>
<dd><div>[photo]</div><div>[intro]</div></dd>
</dl>

对dt和dd都做float:left，dt做一个margin-top:100px来定位到图片和简介中间，dd做一个margin-left:-25%来定位到和dt相同的x坐标（由于无法输入代码就不贴css了）这样的html是我认为最贴切的，根据现在流行的html语义化定义这样的布局太合适不过了。当然css中还是存在非常多的困难，而前面所说的“某原因”也并没有得到解决，反而更甚了，因为把标题和简介流拆开后，标题过长便会和简介的文字叠加根本无法阅读！然而经过几秒钟的思考后认为这玩意儿的解决已经超出了我的范围了。当然，有人可能会说把标题和图片换一个不就可以了么？是的，没错，但是如果这样的话使用dl标签还有什么意义呢？可能有意义吧，就是标题和简介都是为了说明这张图片而存在的，但是真的可以这么想吗？还有待实验去证明，这里就不讨论了。

第二次尝试：

如上所述，dl的存在就没意义了，那就算了吧，退而求其次使用ul（请在砸我鸡蛋前念着我还死了那么多脑细胞在这个上面的份上轻点儿吧），无序列表虽然不如定义列表来得语义那么强烈，但至少它还是和列表吧，至少不是一个division吧。ul的布局相比较就简单多了，看上去也只是把div标签换成了li而已，那么html结构如下：

<ul>
<li><div>[photo]</div>
<div>[name]</div>
<div>[intro]</div>
</li>
</ul>

到这个时候终于要直面本文第四次提到的“某原因”了，如何解决li浮动后高度不同导致的矩阵错位问题？最先进入脑子的想法就是记得很久很久以前看到过一篇关于div自适应高度的文章，于是就在google翻找，当时没有收藏真是太失误了。在google搜索自适应高度那是相当多呀，但是有一篇文章是不得不借鉴的，但是这篇文章并不是适应于我们的案例，很显然它更适用于两栏或者三栏布局，而我们至少有四栏甚至五栏。自此还有什么办法可以让多列布局自适应高度呢？（请不要跟我提关于巨大的padding与负margin这件事）伪装的自适应对于需要货真价实产品的我们是没有用的……至此思维告一段落，我需要回到源头来，最开始的出发点在哪里？如果只是为了清除浮动的话？使用最简单的方法？

带着上面的问题，便渐渐有了解决方案，不可避免的，我可能需要借助后台工程师的力量了，我在每4个li之后的那个li上加上clear:left属性，以清除左边的浮动来防止它因为前面li的高度不够而导致的错位，从它之后的li就应该会乖乖地跟在它的后面了。这个想法很美好，但是很天真，可能我确实在FF等标准浏览器下面获得了预想中的效果（没有想到实现起来那么简单，正在开心中），突然发现又是那该死的IE！！！那个加了clear属性的li确实正常显示了，但是在它之后的那些继续原来它应该范的错误，没有起到清除整行浮动的作用。我懊恼了~通过漫长的研究至今已经找到了一个语义和样式都比较平衡的点却无法在IE中得以实现，怎么办？

第一个想法就是使用hack技术（虽然UEDer们都不推崇，但是为了维护之前的成果，老子发飙了），问题就是如何做hack。先看这样的例子，如果我每4个li后面都插一个<li style=”clear:both;float:none;”></li>的话，不管在IE下还是在FF下都可以完美地完成任务，但是这个方案有一个致命的缺陷，就是对原有html语义的破坏，凭什么好好的列表突然就多出一个空li来？那么能不能在不影响原来语义的情况下，在FF依然使用它应该使用的clear:left方式的情况下来针对IE进行hack呢？非常幸运的是IE给我们提供了条件注释工具<!–[if IE]><![endif]–>（我想一旦开始使用这个东西之后一定会非常依赖它的），因此html结构就变成了这样：

<li>[productItem]</li>
<!–[if IE]><li class=”clearForIE”></li><![endif]–>
<li class=”clearForFF”>[productItem]</li>

希望这样能够看得懂。至此为了尽力表述完整语义的目的就达到了，因为所有的浏览器、搜索引擎和用户都会把那段IE的hack作为一个普通的注释来看待（这里也包括IE自己，这是一段条件注释，那还是注释），因此产品列表的li就没有被中途无故打断，更不会像最早的div版本每四个是一个division。到这里研究工作就算完成了（关于这个IE特有的hack的可能的严重后果木有给予考虑。。。），不过还有一些额外的思考。

其实使用division也不完全是不好，如果division这样做：

<div class=”top20″>
<div class=”top15″>
<div class=”top10″>
<div class=”top5″>
DIV[productItem]{1-5}
</div>
DIV[productItem]{6-10}
</div>
DIV[productItem]{11-15}
</div>
DIV[productItem]{16-20}
</div>

作为业界的晚辈，我当然很期待能够参加这样的聚会，因此在收到圆心同学发来的邀请函时切实感受到的荣幸倍至直到现在依然还在自己小宇宙的某处荡漾着（好似我废话很多，这其实是想引证一下在周五晚上下班后坐上“幸福班车”油然而生的兴奋充斥了头皮）从不到一年前刚刚踩进前端这个行业到能够在第二天进入到国内前端技术行业领先的大型学习交流会简直有如做梦般不可思议，就好像看到精心培育的风信子终于开出了艳丽的花朵一样。

D2贴纸

第二天清早我们一行9个人8点就起来打点行装前去会场锦江国际酒店，本以为已经算是比较早到的一批与会人员了，不料taobao和中文站的同学早已来到会场。会场早已布置好了两块大屏幕分别显示演讲者的演示稿和叽歪网线上直播，据说这次D2的报名者达到了600人之多，大大超出了主办方的预料因此不得不临时更换主办场所，而与此同时也不得不委屈近50%的前端技术爱好者仅发了300人的邀请，为此特意开辟了叽歪网的D2forum来为没有能够到达现场的同行们同步传达会场的内容，这里要特别感谢主办方土豆网的细心设置。

来自Adobe的7yue同学分享Flash10相关内容

这次D2论坛的主题是“前沿技术与前端协作”，在上午的两场讲演中，来自Adobe的7yue同学为我们带来了新鲜出炉的Flash10技术分享，Flash10诸多的新特性和十分牛X的方方面面都在早上1个小时的分享当中展示出来，其中的Pixel Bender工具真是令与会同学们大开眼界，至少在他牛X的Apple Air上轻松地运行这些动态视频像素级渲染看起来是多么的美好，可以看得出7yue同学为此做了充分的准备，它作为演讲嘉宾为这次的D2带来了绚丽的开场。我们都能认识到作为新生的行业，前端技术是一个飞速发展的技术，掌握前沿技术的重要性毋须质疑。

来自Microsoft的超群同学分享IE8与Silver Light相关内容

同样属于前沿技术分享的来自微软的超群同学给大家带来的IE8与Silver Light的新特性分享是一场非常有趣的分享，不管现在的IE产品有多么的令人诟病，但是看起来即将到来的IE8被寄予了大群博士、博士后开发团队非常大的期望，而超群也为我们展示了足以令人对IE有所改观的新特性和功能。而Silver Light在高清视频流媒体上的NB程度简直令我乍舌了，源生支持H.263和mpeg4编码的Silver Light的运行速度其实有点令人担忧，但是超群同学的演示似乎并没有那么困难，只是电脑硬件条件符合了要求是没有用的，祖国的网络硬件条件啥时候才能满足在线观看720P的高清视频呢？

来自Alibaba的Justin同学分享

另外的四场分享都针对着“前端协作”这个主题，开发协作其实一直是所有技术开发人员共同的问题，前端必然需要直面这个严肃的话题。来自土豆网、淘宝网、Alibaba的同学分别分享了各自团队的协作经验。也许很多人觉得团队协作是主管们要考虑的事情，而自己只要做好技术的本职工作就好，因此当天在会场上听到了许多表示希望可以听到更多技术分享的话题，这个希望下一届的主办方可以多参考民众的需求吧，充分发挥UCD的理念。同时晚辈也觉得四位老大们分享的前段协作似乎稍微不够浅显了，也难怪会有异样的声音。

D2合影（请注意某人右手的包）

因为不可抗拒的原因，论坛比预计的时间提早了1个半小时结束，直接导致我们无敌男人小组的不知所措，车票已然定好，剩下的时间就只能在候车室打法了。终于能够把握这次机会坐上一趟和谐号了，可惜乌漆抹黑的晚上根本无法享受170KM/H的快感，只能在睡梦中消化白天的学识了。

最后，所有D2的资料都可以在http://www.d2forum.org/2008/12/04/look-back-upon-the-third-d2-forum/这里找到。下一届的D2会回到杭州，期待能有更多的技术交流了。

PS：期待IE系列贴纸

通常写法:

#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999;
margin: 3px 0 3px 0;
padding: 3px;
}

注释的代码段：

#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999; /* ADDED Apr. 9, 2008 */
margin: 3px 0 3px 0;
padding: 3px; /* CHANGED Feb. 14, 2008 (Prev. 1px) */
}

上面的代码中，注释了增加代码的时间，修改代码的时间以及修改前的属性值。如果是多人协作，我建议还加上修改者的名称。当然，这样一直写下将带来过多的垃圾代码。需要定期的整理归档，保持文档的时效性。

1. 用Javascript来开发WEB页面的动画效果
2. 该思路同时考虑页面效率、SEO，如果数据大，也可以缓解后端压力。
3. 这个是程序设计思路
4. 还谈不上思想，只是自己实践使用过的一个方法

我们经常看到网页上有各种各样的动画，例如下图

有N条记录，需要在页面上滚动显示，并且需要循环。

我们先假设一下条件

1. 这些记录都需要被搜索引擎收录
2. 直接对页面元素做动画有困难（这里可能比较简单，但是困难的情况还是很多的）
3. 信息需要循环显示
4. 数据比较多，N条

这个时候出现问题

1. 数据必须是HTML标签，不能直接写入JS
2. 直接对页面元素控制，并做动画有难度。由于要循环，得拆分子元素
3. 数据比较多，控制子元素会出现效率问题

第一个问题呢，我们这么做，让HTML载入，然后用JS来读取HTML信息作为数据控制。这个应该比较简单的。

第二个问题怎么搞呢，我们在读完数据之后，再搞出一个代理层来，比如叫A层。那么A层仅仅是提供显示，JS控制这个层来做动画。每次动画的时候呢把新的数据填进去，再做动画。

第三个问题迎刃而解，控制A层就OK了。

Y方案：具体看看流程吧：（我把JS读取数据的步骤省略不说了，这个相信大家都知道怎么搞）

第一步，元素的层次结构：

 A层  z-index:2;————   隐藏  //负责动画
真层 z-index:1;————  显示  //给爬虫看，且负责显示的当前信息

第二步动画：完成后返回第一步既可。

A层填入数据–》显示–》动画 
动画结束之后，B层直接设置坐标，到标准位置
A层隐藏。

上面这样做的理由是，填数据的过程，是会造成页面抖动的，所以我们把这个过程隐藏的来完成。

 更升级的问题，如果真层直接设置坐标也比较困难，怎么办？那么就再搞个B层出来

X方案： 

A层  z-index:3;————   隐藏 //负责动画
 B层  z-index:2;————   显示 //只显示当前信息
真层 z-index:1;————  隐藏 //仅仅给爬虫看，以及读取数据用，之后不再显示

动画的时候，A填入数据–》A显示–》A动画–》B填入数据–》A隐藏

再升级下问题：如果数据实在太多，没法一次用HTML载入完成，怎么办？那么用AJAX来搞吧，具体做法和上面一样

从具体到抽象：设计的思路是数据和表现分离。
给用户看的其实是一个JS创建出来的层，不断的更新数据，不断的隐藏显示来造成假象，然后做动画。

注意的问题：如果每个item中，图片比较多，可能会浪费浏览器的渲染时间和增加HTTP请求。适合用Y方案。如果数据需要异步，且比较难控制坐标的时候，那么适合用X方案。

css里关于浏览器的兼容问题一直困惑着我们初级的css用户（高手可直接绕过），这里想根据我前段时间拜读的李超的书籍《css网站布局实录》里学到的有关处理浏览器兼容的问题，根据我前段时间在公司minisite项目里碰到的一些问题和解决方法分享给大家。浏览器兼容性的问题，我想一直是困绕我们设计师的棘手问题，css的难点就在这里。解决好这个问题，我想你的css水平一定会得到大步的提升。

自从W3C标准推出以后，现在新的一些浏览器多多少少在使用这套web的新标准，但在各自对新标准的执行上并不统一，这就给我们设计师带来很多的问题。目前世面上主流的浏览器还是IE和firefox,这两个浏览器几乎占领着整个浏览器的市场。而IE下面大部分人在用IE6和IE7两个版本的浏览器，而这两个版本对css的支持有非常多的差异之处，这种差异是最需要我们设计师注意的，因为它跟我们的日常设计息息相关。我在实际的制作过程当中遇到的问题有绝大部分是出现在IE6和IE7的css兼容性问题上。IE6，IE7在加上firefox2.0，如果能把这三个浏览器都搞定了，也就基本上满足95%以上的用户了。在下面我列举了一些我在项目里碰到的实际的问题和解决的方法，其中有很多是css高手GL的处理思路和解决方法，非常值得吸取和借鉴，因为这为我们解决今后遇到类似的问题提供解决问题的思路。建议先阅读《css网站布局实录》这本书，现在出了新版本《css网站布局实录2》，要仔细阅读哦，相信我，的确能让你收益非浅。下面列举一些事例，希望能给大家提供一些借鉴：

A: IE6/IE7 div等块对象默认具有高度
下面图A是IE6里的一个div,  宽度是420px,没有设置高度, 其在IE6/IE7浏览器里,默认DIV具有了一个br的高度,图B是在firefox2.0下显示,div无高度。这样就给我们设计师在实际制作过程当中带来问题，因为有的时候我们要设置一个div高度为5px，用于放置一张背景图片，在IE6里就会有问题。IE6的显示保持在了最低高度一个br，如图c，在同样设置height:5px;情况下，上面是firefox显示下面是IE6。解决的方法是在div里设置一下line-height:0px;

图A

图B

图C

B: IE6下块对象默认的3PX现象
如图，上面是IE6.0里的显示，下面是IE7.0和firefox2.0,红色div设置为float:left;图片在宽度正好的情况下，在IE7和firefox下可以上去，而在IE6里面就被显示在了第二行。这就是IE6的著名的3px现象，当一个对象设置为左悬浮，这个 块对像跟它右边浮上来的对象默认具有3px的margin, 解决的方法是针对于IE6，在css里写一个css hack, 如在左边的div上加：margin-right:0px!important;margin-right:-3px;!important这个标记IE7和firefox是支持的，而我们伟大的IE6却视而不见，我们就可以根据这个特点，让左div针对IE6有一个-3px的右margin,而IE7和firefox为0。

有兴趣的可以拷贝下面代码自己请手去试一下:(考虑在blog里显示的问题，下面代码人为增加了一些空格，请copy的时候自行删去)
< div style=”width:502px;height:80px;border:1px solid #000;”>< div style=”width:250px;background-color:#ff0000;height:60px;float:left;margin-right:0!important;margin-right:-3px;”>< /div>img< /div >

C: 图层float实现页面布局，遇到的浏览器问题
这是我在具体做项目时实际遇到的问题，解决这个问题的思路和方法来自GL的支持，我把它整理出来分享，希望能给你有所帮助。

看下面图1，现在一共有divA, divB, divC, divD, divE这么５个div,　目标是让divD和divE移上去，跟divA其行显示，达到图２的效果。我在当时实现的时候，在divA,divB,divC里分别加上style=”float:left;clear:both”,这样在IE6和IE7里实现了图2的效果，但在firefox里就出现了图3的显示，我在当时试过很多方法, 如在div4里写float:right;让div4有悬浮，想让它上去，这样只能跟divC并列显示。对css感兴趣的人可以先自己试试，其实方法很是简单，给div4和div5分别设置个左边距如margin-left:380px;就解决了。这个例子解决起来其实很简单，这里是提供一种解决css兼容问题上的一种思路。

图1

图2

图3

D: 如何让图片在div里左右居中，上下居中
如下图1， 我们要让图片在IE6，IE7和firefox下图片相对div左右居中，上下居中来显示如图2，这是众多设计师可能都要面对要解决的问题，因为这种方式我们经常要用到。这里把解决的方法分享给大家，要想让图片左右对齐，我们可以在div里写入”style:text-align:center;”,左右居中问题好解决，现在看一下，IE6,IE7和firefox里，图片都已经是左右居中了，技术的难点是如何让图片在三个浏览器垂直居中。大部分人可能会考虑使用vertical-align:middle来使图片居中，加上去看看没有出现效果，这里我们针对图片设置如下代码：style=”_margin-top: expression(( 300 – this.height ) / 2);发现在IE6下效果实现了，再看看IE7和firefox, 没有变化，这里我们针对IE7和firefox来设置，在div里写入line-height:300px;vertical-align:middle,发现IE7这时候也有效果了，这里的line-height:300px;是根据div的高度定的，如果div的高度为100px,则这里设置line-height:100px,这里我们设置为300px。那么，这时候IE解决了，看一下firefox图片还没垂直居中，再对div增加样式:display:table-cell,现在再看看firefox也好了。

图1

图2

参考代码：
< div style=”width:300px;height:300px;text-align:center;vertical-align:middle;line-height:300px;border:1px solid #ccc;display:table-cell”>
< img src=”aaaa.jpg” mce_src=”aaaa.jpg” style=”_margin-top: expression(( 300 – this.height ) / 2);” />
< /div >

E: IE捉迷藏现象
捉迷藏问题是IE非常典型的对css支持上的bug, 问题主要出现在IE6浏览器。当div嵌套结构稍微复杂时，就会出现捉迷藏情况。如下面例子：

起初我们写上比较简单的结构代码，如下：

上面代码非常简单，现在我们在里面尝试增加一些内容：

为了让bug显示，我们给上面的xhtml写上css样式，如下：

然后我们到IE7.0 firefox里先后去预览一下，显示一切正常，如下图1。

图1

我们再到IE6去打开它，发现在刚刚打开的时候，看到如下图2的情况，右侧的内容奇怪的消失了。全选页面内容，发现右侧内容是存在的，如果用鼠标移到链接上面，右侧的内容又跑了出来，这就是IE6著名的捉迷藏现象。不仅在目前事例中，在其他情况下也可能出现。造成这种现象的具体触发机制目前还不能合理的归类，至今为止，这种情况只在IE6下出现。

图2

解决这个问题的方法，可以参考positioniseverything.net的网站专家给出的一些建议：
a: 在代码的下面使用一个带有< div style=”clear:both;”>< /div >这样的div来清除悬浮
b: 如果有可能，给layout对象设定width和height
c: 可以尝试给layout和left对象使用position:relative
d: 对layout使用line-height属性，强制浏览器对内容文字进行行距调整。

以上是提供解决浏览器问题的一些技巧，positioniseverything.net网站专家的建议，更重要的是要养成良好的编码习惯来预防捉迷藏情况的发生。

一些问题是浏览器自身的问题，遇到问题发生无法避免的情况下，那就要考虑使用一些css hack了，以下是针对IE6,IE7和firefox可以使用的一些css hack:
a: 针对区别IE6 和IE7/firefox, 可以在要区别的代码后面跟上!important
b:针对IE7/firefox 在css的前面加 [xmlns], 如下面的left属性，如果我想要只针对IE7/firefox起作用，写法如下：
[xmlns] #left {
 float:left;
 border:4px solid #999;
 padding:5px;
 width:200px;
 height:200px;
}
c: 只针对IE6起作用，可以在css前面加* html,如:
* html #left {
 clear:both;
}

d: 只针对IE7起作用，在css里前面加*+html,如:
*+html #left {
 clear:both;
}

<div class=”A” style=”position:relative;”>A (relative)
 <div class=”logo” style=”position:absolute;z-index:99999;“></div>
</div>
<div class=”B” style=”position:relative;”>B (relative)</div>

最近做minisite项目时，碰到了个奇怪的定位问题: 以上的A，B两个盒子是相对定位,
标牌logo是A的子级，基于A做绝对定位
问题描述：我们希望标牌logo显示在最上面，但在IE下logo标牌部分被B区域遮住,B在最上层显示，调整logo的z-index的数值调整无效，firefox下显示正常。

解决方案：先了解一下所涉及到的几个定位特性（非官方解释）：
1. 相对定位元素默认的z-index的数值是0。
2. 当两个相对定位同时出现时，代码靠后的z-index优先。
3. 子级遵循父级设定的z-index；如果子级设定了绝对定位、z-index，可以冲破父级显示
这个问题主要是ie对上面第3条错误解释导致的—在ie下子级的z-index不能冲破父级。网上解决这个bug的办法一般用hack使B为负值，来降低 B 在IE下级别，这种方法绕了一个大圈：z-index为负值时，产生了新的ie bug。

按照定位的特性，ie的这个bug是可以回避的，从表面上看 B 遮住了logo，实际上是 B 遮住了logo的父级 A ，只要将 A 的z-index设定大于B即可。

<div class=”A” style=”position:relative;z-index:1;“>A (relative)
 <div class=”logo” style=”position:absolute;”></div>
</div>
<div class=”B” style=”position:relative;”>B (relative)</div>