今天遇到一个棘手的问题。一开始想偏了，仅以为是IE这个变态浏览器解析不出来TABLE内JS的高度，后来发现是错怪了它，跟什么高度没关系。再后来又发现，没必要抱歉，这种变态浏览器，就应该被骂。
javascript加载顺序的BUG：
出现这种BUG的几率，应该是比较罕见。首先是一个内容页面，【a.html】，它的里面包含了一个【b.js】
<SCRIPT src=”b.js” type=text/javascript></SCRIPT>，然后【b.js】里面，包含了一个【c.js】document.writeln(‘<script type=”text/javascript”>’);……逻辑暂时还没有混乱呢，介于我表达能力不强的缘故，估计一会就该混乱了。那……那画个图吧……好久没用photoshop呢……
页面用大方块表示，JS用大圆团表示……
从图来看，能很清楚的知道谁包含谁。像firefox和chrome这样的“非脑残”浏览器都能正常解析。
但是，IE这种“脑残”浏览器，解析的时候，要先加载完【b.js】，完事后，再去加载【c.js】，导致如下所示的结果：
查了很久，这样JS包含JS导致加载出错的情况，确实有解决的办法，前提是【a.html】我要有编辑的权限。时间又很紧张，中午饭的时间都赔进去了，还是没研究出来。只好选了折中的方法，建立中转页面。也就是在【b.js】里边写入一个新加的iframe页面，document.writeln(‘<iframe src=”transfer.html” width=”100%” height=”69px” scrolling=”No” frameborder=”0″></iframe>’);
然后，在iframe页面中，再嵌入【c.js】……这样，通过js-html-js的中转，来避免js-js嵌入出现的问题。
在曾经的 淘宝UED 招聘中有这样一道题目：
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”
题目的难点在于两个方面：
- 垂直居中；
- 图片是个置换元素，有其专有特性。
至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：
- <pre>.box {
- 非IE的主流浏览器识别的垂直居中的方法
- display: table-cell;
- vertical-align:middle;
- 设置水平居中
- text-align:center;
- 针对IE的Hack
- *display: block;
- *font-size: 175px;约为高度的0.873，200*0.873 约为175
- *font-family:Arial;防止非utf-8引起的hack失效问题，如gbk编码
- width:200px;
- height:200px;
- border: 1px solid #eee;
- }
-
- .box img {
- 设置图片垂直居中
- vertical-align:middle;
- }
- <div class="box">
- <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" alt="" />
- </div>
当然还有其他的解决方法，在此不深究，有兴趣的可以阅读下：
方法1：
全国哀悼日，刚把自己的网站改成黑白的配色，就接到电信的通知，那边的欢迎页也要换掉，其实方法很简单，我们可以采用IE的CSS滤镜来实现，*{filter:gray;}
如果需要某一区域保持原色调（例如LOGO区域），则需要定义一个单独的样式，然后在需要的地方引用该样式即可
.nogray{filter:gray(enabled=false);}
方法2：
局部通配符：form,div,table,span,img,ul,ol,li{filter:gray;}
方法3：
手册上讲：使用 BasicImage
滤镜可以更有效率的建立效果，不过用软件检测，页面载入速度并没有明显的提高，大家也可以考虑使用这种方法来实现，优点是，在处理透明图片上，效果更好一点（无毛边）：
html { filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1); }
方法4：
腾讯采用的是这种做法：把所有页内的IMG全部手动做灰，然后调整现有样式表，全部使用灰度配色，这种做法页面载入效率是最高的，并且做到了跨浏览器操作，适合大流量网站采用。
另外，如果采用方法4，可采用如下方法改变FLASH灰度：
flash变灰的方法：object 之间加入
<param value=’false’ name=’menu’/>
<param value=’opaque’ name=’wmode’/>
一、概况
Adobe采用了每刷新一次页面，调用一款产品的方式，给访问者展示不同的内容。
首页分成了4个区块：
A.顶部导航区、B.产品展示区、C.产品列表及相关信息块、D.底部版权区
解析如下：
HTML片段：
二、顶部导航区
导航区域，Adobe用”dt”和”dd”分出了4个小块：
解析如下：
不太符合国内开发习惯的是，他们采用了从右向左的写法，先给出了最右侧LOGO区域的<dt id=”adobe-logo”>标签，然后是<dd id=”site-search”>搜索区域，最后才是上下并列的两个左侧导航区域。值得借鉴的是，Adobe在导航区的下拉菜单运用了”dl”内 嵌套”ul”的方法来实现效果，在国内的网站中这种写法目前尚不多见。
HTML片段：
三、产品展示区
这个区块主要是通过FLASH来作为主要的表现形式
通过JS中FMARotator参数对背景层及对应产品FLASH路径的指定，来实现每刷新一次页面，更换一下产品展示区域的内容。
HTML片段：
四、产品列表及相关信息块
从直观上看，这是一个三列的布局：
但实际上Adobe只把这部分内容分成了两个大的块，<div id=”contentBody”>和<div id=”contentPocket”>
解析如下：
然后再用”columns-2-AB-A”和”columns-2-AB-B”这样的共用样式，分别切分出左右布局的结构，最后使用<br class=”clear-both”/> 清除浮动，代码非常简洁。
HTML片段：
五、底部版权区
相比较上边的内容，这里的结构比较简单
整体分成了上下两个块，上部的是站内的链接区域，下部的就是版权信息了
内部代码仍然采用了从右向左的写法。
HTML片段：
