岁月如歌

现象

请在 IE 下的非 iframe 页面中运行以下代码：

alert(window === window.top); // 1
alert(self === window.top); // 2
alert(self === window); // 3
alert(window == window.top); // 4
alert(typeof self === typeof window); // 5
alert(self == window); // 6

分析

上面第 5 和第 6 行的结果都为 true. 按照 ECMA-262 的定义，按理说 self === window 应该为 true.
然而测试结果告诉我们：在 IE 下，不是这样！

结论

IE 下，top, self, parent 和对应的 window 并不全等。涉及到这些值，用 === 比较时，要谨慎。
原因没想明白。就如 IE 下一些诡异的 CSS Hack 一样，要真弄明白，也许只能去找比尔盖茨要一份 IE 的源码了。

幸运的 jQuery 和倒霉的 YUI

jQuery 1.3.2 模拟 DOMReady 的代码中 阅读全文 »

好友怿飞前不久总结过：模拟兼容性的 addDOMLoadEvent 事件

需要特别注意：在 iframe 中，doScroll 方法不会抛异常。需要用 onreadystatechange 来模拟：

// from jQuery 1.3.2
// If IE event model is used
} else if ( document.attachEvent ) {
    // ensure firing before onload,
    // maybe late but safe also for iframes
    document.attachEvent("onreadystatechange", function() {
        if ( document.readyState === "complete" ) {
            // ...
        }
    });

    // If IE and not an iframe
    // continually check to see if the document is ready
    if ( document.documentElement.doScroll && window == window.top ) (function() {
        // doScroll ...
    })();
}

YUI 用户要小心：目前在 YUI 2.7 和 YUI 3.0 pb1 中，均未修复此 bug. 在 iframe 中，请尽量将 js 代码放在文件尾部以避免此问题。

在 YUI 2.8 中，该 bug 已修复：Ticket #2008289. 从 bug 被提交，到问题解决，历时一年多，囧。

时不时会遇见这个bug，学习PPK，记录沉淀下。

现象

测试页面：ie_hasLayout_width_bug.html

正常情况下，没有设定宽度的浮动容器test-wrap，当包含的block元素test-box也没有设定宽度时，test-box的宽度会和test-wrap保持一致：

其中test-wrap的宽度取决于所包含的子元素的最大宽度。

但在IE7下，test-box的宽度塌缩到最小了 阅读全文 »

请在ie6下打开：ie6_js_hidden_select_bug.html

通过：

document.getElementById('J_Test').style.display = 'none';

可以隐藏select元素。

但是通过：

document.body.id = 'page';

配合css代码：

#page select { display: none; }

在ie6下，无法隐藏select元素。
尝试position, setTimeout, 改变zoom到1.001等方法，均失败。

想起ie6下，臭名昭著的select需要用iframe遮罩的bug，估计和上面的bug根由是一样的：在ie6下，select是windowed element，其表现和普通的HTML elements有本质上的区别。至于究竟为何？估计只能去看微软的源码了。

MSDN上的一点相关信息：How the Z-index Attribute Works for HTML Elements

先看IE的一个现象

从非常简单的一个例子开始：

f();
function f() { alert('test'); }

上面的代码所有浏览器都能正确执行，原因是“预解析”（如果不了解，请阅读 JavaScript运行机制浅探）。

稍微变化一下：

f();
var a = function f() { alert('test'); };

上面的代码在IE下能正确执行，在其它浏览器下，提示f未定义。原因是 阅读全文 »