PS：晚上光线不是很好，毕竟是纯炫耀贴，请大家无视我的拍照技巧=.=!

以扎库米的名义，期待世界杯早日到来！

附：南非世界杯对阵&比分统计表

• A:document.getElementById(‘testFrame’)
• B:window.frames['testFrame'];
• C:document.getElementById(‘testFrame’).contentWindow

测试结果(非IE浏览器及IE8)


从测试结果及其比对结果可以看出，A得到的是iframe这个html标签对象，B和C得到的是iframe浏览器对象(window)，有意思的是IE7及以下版本浏览器认为这两者是不恒等的

测试结果(IE7&IE6-)


有趣吧，从B==C可以看出，证明两者是同一类型及同一引用，参考设计规范，理应恒等（===）。只能说，M$遵循的不是规范，是寂寞！好在IE8现在已经玩不起寂寞了。

接着测试浏览器对contentDocument的支持情况：

• D:window.frames['testFrame'].document
• E:document.getElementById(‘testFrame’).contentWindow.document
• F:document.getElementById(‘testFrame’).contentDocument

测试结果(非IE浏览器及IE8):


测试结果表明:D和E得到的是同一对象，IE7及以下版本浏览器不支持contentDocument属性

测试结果(IE7&IE6-)


在使用contentDocument属性时需要考虑兼容性：
function getFrameDocument(frame){
return frame && typeof(frame)=='object' && frame.contentDocument || frame.contentWindow && frame.contentWindow.document || frame.document;
}

调整后的测试结果(IE7&IE6-)：


附：测试页面

Comments

• 2010年03月13日, kanger writes: 太深奥了！慢慢看

看看ECMA规范中是如何对==和===操作符进行定义的，了解其深层的规则和jslint提示的缘由

首先介绍==
11.9.1 等同运算符( == )

运算符规则如下所示：
1. 计算运算符左侧表达式;
2. 对第1步的结果调用GetValue;
3. 计算运算符右侧表达式;
4. 对第1步的结果调用GetValue;
5. 对第4步的结果与第2步结果执行比对（参考 11.9.3）;
6. 返回第5步结果;

再来详细了解比对过程(11.9.3)
11.9.3 抽象的等同比对算法

假设有 x,y 进行比较 ，则有 x == y;
1. 如果xy类型不同，转至第14步;
2. 如果xy类型均为Undefined，返回 true;
3. 如果xy类型均为Null，返回 true;
4. 如果xy类型均不是Number(数值类型)，转至第11步;
5. 如果x的值为NaN，返回 false;
6. 如果y的值为NaN，返回 false;
7. 如果x与y的数值相同，返回 true;
8. 如果x是+0并且y是−0，返回 true;
9. 如果x是−0并且y是+0，返回 true;
10. 返回 false.
11. 如果xy类型均为String(字符串类型)，判断x与y是否有相同的字符（对应位置字符相同），是则返回 true，否则返回 false;
12. 如果xy类型均为Boolean(布尔类型)，xy均为true或均为false则返回 true，否则返回 false;
13. 如果x与y引用同一个对象(object)或者xy引用的对象是Joined关系（参考13.1.2）则返回 true，否则返回 false;
14. 如果x为null且y为undefined，返回 true;
15. 如果x为undefined且y为null，返回 true;
16. 如果x类型为Number，y类型为String，先将y转换为Number类型，再进行比对，返回结果;
17. 如果x类型为String，y类型为Number，先将x转换为Number类型，在进行比对，返回结果;
18. 如果x类型为Boolean，先将x转换为Number类型，再进行比对，返回结果;
19. 如果y类型为Boolean，先将y转换为Number类型，再进行比对，返回结果;
20. 如果x类型是String或者Number且y类型为Object，先将y转换为基本类型(ToPrimitive)，再进行比对，返回结果。
21. 如果x类型为Object且y类型为String或者Number，先将x转换为基本类型(ToPrimitive)，再进行比对，返回结果。
22. 返回 false.

接着看恒等运算符（===）
11.9.4 严格等同运算符( === )

运算符规则如下所示：
1. 计算运算符左侧表达式;
2. 对第1步的结果调用GetValue;
3. 计算运算符右侧表达式;
4. 对第1步的结果调用GetValue;
5. 对第4步的结果与第2步结果执行比对（参考 11.9.6）;
6. 返回第5步结果;

这几步和==运算符是一样的，我们着重来看第5步的比对过程：
11.9.6 严格性等同运算比对算法

假设有 x,y 进行比较 ，则有 x === y;
1.如果xy类型不相同，返回 false;
2. 如果xy类型均为Undefined，返回 true;
3. 如果xy类型均为Null，返回 true;
4. 如果xy类型均不是Number(数值类型)，转至第11步;
5. 如果x的值为NaN，返回 false;
6. 如果y的值为NaN，返回 false;
7. 如果x与y的数值相同，返回 true;
8. 如果x是+0并且y是−0，返回 true;
9. 如果x是−0并且y是+0，返回 true;
10. 返回 false.
11. 如果xy类型均为String(字符串类型)，判断x与y是否有相同的字符（对应位置字符相同），是则返回 true，否则返回 false;
12. 如果xy类型均为Boolean(布尔类型)，xy均为true或均为false则返回 true，否则返回 false;
13. 如果x与y引用同一个对象(object)或者xy引用的对象是Joined关系（参考13.1.2）则返回 true，否则返回 false;

可以做如下概括：
==运算符在做比对时存在类型转换的可能，而===运算符只在同类型之间比对，是==的严格模式。
1.类型相同：进行===比对。
2.类型不同：基本类型Boolean、Number、String这三者之间做比较时，总是向Number进行类型转换，然后再比较；如果类型有Object，那么将Object转化成基本类型，再进行比较；null仅和undefined匹配；其他都为false。

根据规范和概括，我们不难明白：

1. undefined只等于(==)undefined或null，null亦然
2. 空字串(”) == 0 == false ，因为Number(”),Number(false) : 0
3. true == 1 ，因为Number(true) : 1
4. false===0 一定返回flase ，因为类型不同

恒等必定等同，等同未必恒等，需择之而用！

相关资源：Javascript Type-Conversion

 

Comments

• 2010年03月3日, simaopig writes: 最后的总结很到位，呵呵。。恒等必定等同，等同未必恒等，需择之而用！ PS:JSLint只是听过，从未用过。。一会儿一定好好看看。。
• 2010年03月4日, kangre writes: 好详细哦！多谢！
• 2010年03月6日, Silentash-默尘 » iframe兼容性测试-文档内容获取 writes: [...] 测试结果(非IE浏览器及IE8) 从测试结果及其比对结果可以看出，A得到的是iframe这个html标签对象，B和C得到的是iframe浏览器对象(window)，有意思的是IE7及以下版本浏览器认为这两者是不恒等的 测试结果(IE7&IE6-) 有趣吧，从B==C可以看出，证明两者是同一类型及同一引用，参考设计规范，理应恒等（===）。只能说，M$遵循的不是规范，是寂寞！好在IE8现在已经玩不起寂寞了。 接着测试浏览器对contentDocument的支持情况： [...]

1. 稳定性提升：比之前的pre-alpha版本更稳定
2. 界面更美观：界面越来越美观，不得不承认，Opera开发小组在此下了很大的功夫
3. Opera Unite：此版本支持Opera Unite,用户可以浏览和下载Opera Unite 应用
4. HTML5<video>标签：此版本现在也支持html5 <video>标签啦，这真是个好消息。什么是<video>标签?
5. 独立应用程序式挂件：解决了此前只能在opera windows版本使用独立应用程序式挂件的尴尬局面，更多请查看ODIN post by Patrick Lauke on standalone widgets
6. 新版开发者工具菜单：此版本把常用开发者工具(Opera Dragonfly、cache information和控制台等)统一放到新菜单“View->Developer Tools”中

Opera 10.50性能大比拼：

更多请看：Opera 10.5 grabs browser speed crown

从测试结果来看，Opera10.5 比 safari 4.04 windows版 和 chrome 4.0 还要快15%以上，firefox 已经被前三者远远抛在后面，要加油哦，IE 就不提了=.=!

顶Opera!

Comments

• 2010年03月1日, bluewolfox writes: 刚装了Opera10.50Beta，不知道是不是有这么快哈 现在是Chrome用惯了，都用着Chrome呢 话说IE8的差距也太大了吧，无语了-_-b，反正也都不用IE8……飘走
• 2010年03月1日, nunumick writes: 有竞争是好事，呵呵

祝福给过我生命、快乐、悲伤、痛苦、挫折、勇气、财富、爱情、幸福的所有人新年&情人节双节快乐！幸福！

亲人，我爱你们



我也爱你，我的情人



我爱所有人

注：以上图片摘自wow.com Around Azeroth 图集

Comments

• 2010年02月14日, wlsy writes: 杀花。祝你新年更荡漾
• 2010年02月20日, 小黑 writes: 突然发现偶身边好多人都在WOW~
• 2010年02月24日, baihechou writes: 你个土人，埃
• 2010年02月24日, Sam writes: Hi~关注你的博客有段时间了，一直没有发言，不好意思。 发现你的很多资源不能访问了，想问问是怎么回事呢？
• 2010年02月25日, nunumick writes: @Sam 近前转换了博客的代码和数据，可能有些文章不对了，我会尽快恢复的。谢谢您的关注和提醒

置换元素与A标签

场景：
IE6，A标签内的图片（置换元素），默认隐藏，hover显示

html：

   <a href="#">
      <img src="" />
   </a>

css:

   a img{display:none}/*使用visibility也行*/
   a:hover img{display:block;}

现象：
ie6,hover后无法正常显示 a 标签内的图片

解决方法：

1. hover 时触发 a 标签的 hasLayout

      a:hover{
         _zoom:1;
      }
   

2. 使用 JS 脚本添加 class

Demo：demo1

置换元素与position

在前面的基础上给 img 加上容器，设置position，默认隐藏，hover 显示

html:

   <a href="#">
      <span>
         <img src="" />
      </span>
   </a>

css:

   a{position:relative}
   a span{position:absolute;display:none;}
   a:hover span{display:block;}

现象：
ie6,hover后无法正常显示 a 标签内的图片，触发其 hasLayout 可以显示，但无法再次隐藏

Demo：demo2

解决方法：

1. 使用visibility代替display
2. 清除span元素的position
3. 使用脚本

一个更极端的例子：The IE ‘non-disappearing content’ bug

图片与hasLayout

同样的例子，如果 img 的容器 span 元素被触发 hasLayout 则会导致 a 链接在 IE6/7 浏览器下失效（图片区域）

html:

   <a href="#">
      <span>
         <img src="" />
      </span>
   </a>

css:

   a span{display:inline-block}/*float,absolute,zoom都行*/

现象:
图片区域链接无效

Demo：demo3

解决方法：

1. 还原span容器的hasLayout
2. 尽量不要采用此类布局

Comments

• 2010年01月31日, rainoxu writes: 这个之前我也遇到过，减少嵌套，合理嵌套是更好的解决方式。 p.s:要是能附上上面这些问题出现的原因，那就更好了：）

虽是老生常谈的内容，熟者当熟，生者必生，前端布道之路还远远没有尽头……

视点:

中部镂空，周围用背景色覆盖的背景图是这个设计的亮点，正好和常规背景图设计相反，很有想法。

将此图放大，可以看的更明白些：

正常状态：

设置其他颜色和透明度：

这种设计的好处在于

1. 可维护性：方便星星的颜色定制，方便换肤
2. 可访问性：图床挂掉时还有背景色做保障，CSS 未加载也能通过内部文字体现涵义

不过原文没有考虑 CSS 未能加载的状况（用的是内嵌图片，没有涵义），html结构也有些复杂，还有很大的优化空间：

优化：

1.综合考虑之后，先将几个五星背景图合并为一个

2.再用三个 inline 标签就可以做好一个极具可访问性的星级评分结构：

   <span class="rating-holder">
        <!--加入默认分数，保证残障用户可以理解评分内容-->
        <em class="rating-score" style="width:50%">(2.5分)</em>
        <em class="rating-star"></em>
   </span>

效果与多种情况下的可访问性演示：Demo

此法维护性也甚好，不仅可用纯色，还可设置渐变效果，只要背景图和渐变色处理得当，其效果可比“纯图像”。不爽的是火狐要 3.6 版本才能使用渐变色，而 opera 还不支持 CSS 渐变，不过迟早是要支持的，提前体验一下吧：

  /*不支持渐变的浏览器用纯色*/
  background-color:#d4a120;
  /* webkit */
  background:-webkit-gradient(linear,left bottom,left top,color-stop(0.4, #d4a120),color-stop(0.7, #e6db03));
  /* firefox 3.6 +*/
  background:-moz-linear-gradient(center bottom,#d4a120 40%,#e6db03 70%);
  /* ie5+ */
  filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#e6db03,endColorStr=#d4a120);

手动书写渐变代码费时费力，有了渐变代码生成器，好多了，比如

• http://gradients.glrzad.com/
• http://www.westciv.com/tools/gradients/index.html

一些参考文献：

• CSS3 Gradients: No Image Aqua Button
• css gradients in Firefox 3.6
• Introducing CSS Gradients

崇厚妹妹建议我启用二级域名：blog.silentash.com，说比www.silentash.com/blog 看上去专业多了，TMD，他自己还在用 www.xujiwei.com/blog ，算了，二级域名我喜欢，换就换吧。

因为域名与 wordpress 设置都要做变化，之前静态地址都不能用了，所以今天又花了半天时间，为以前的静态地址做了301重定向，搞定，除了速度偏慢，其他一切看上去都像模像样！

有三点希望：

1. godaddy快一点
2. godaddy再快一点
3. godaddy再再快一点