岁月如歌

从蓝色理想看到这贴：固定在右下角的离奇方法

受上面帖子的启发，也做了一个demo：ie6_fixed_position.html

代码：

<div id="a" style="width: 300px; height: 100px; background: red">test</div>
<script>
    var ie6 = !window.XMLHttpRequest;

    var a = document.getElementById('a');
    a.style.position = ie6 ? 'absolute' : 'fixed';
    a.style.right = 0;
    a.style.bottom = 0;

    if (ie6) {
        window.onscroll = function() {
            a.className = a.className;
        };
    }
</script>

原理分析：

1. position: absolute的元素，直接放在position:static的 body 中时，绝对定位的参考物是 body 的 viewport 部分。这使得元素 a 在窗口 resize 时，自动就能准确定位到右下角。注意：body 的 position 不能为 relative 等值，否则失效。
2. onscroll 时需要特殊处理一下，使得滚动时，也让绝对定位元素 a 的参考物能更新为当前的 viewport. 上面的a.className = a.className就是这样一个 hack: 使得 a 的定位参考物动态更新为当前的 viewport. 类似的 hack 还有a.style.background = 'red'. 这些 hack 会引发 reflow, 但反之不一定，进一步的规律没找到，不过有一个 hack，也就够用了。

耐心总结，快乐分享，欢迎讨论。

时不时会遇见这个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