白兰花 – 林俊杰

这首歌有点特别,虽然是复古风格,但我还是很喜欢听的,不知道是不是因为我是个怀旧刻板的人?非常有老上海的感觉。

z-index 层叠原理

z-index 这个属性,相信大家跟我一样,刚看到它的时候都觉得挺简单的,不过是 z 轴的值而已,越大就越靠前。但是实际用起来,往往又出现问题,得不到想要的结果。其实层叠的原理还是有必要深究一番的,至于如何搞清楚,最好的方法当然是看一看标准了。

首先,z-index 的值可以是 auto、整数或 inherit,默认值为 auto该属性只能用在定位元素上,也就是说,对静态定位元素使用 z-index 无效。当用户面朝显示器时,z-index 值越大的元素离用户越近,而具体的层叠规则,先要扯出一个概念:堆叠上下文(stacking context)。是不是联想到了块级格式化上下文(BFC)?在这我也将其简称为 SC 吧。

文档中的每个元素,都存在于一个 SC 中,根元素会生成一个根堆叠上下文(root stacking context),而对于其他元素,只有满足两个条件才会生成一个新的 SC:z-index 不为 auto 且必须是定位元素 (position 的值不为 staticSC 是可以嵌套的。

SC 是进行堆叠的基本单位。假如元素 A 生成了一个 SC,那么 A 的所有后代元素的堆叠顺序如下:

  1. A 的背景和边框
  2. z-index 为负值的各个 SC
  3. 静态定位的块级元素
  4. 静态定位的浮动元素
  5. 静态定位的行内元素,包括 inline table 和 inline block
  6. z-index 为 0 的子 SC,和 z-indexauto 的定位元素
  7. z-index 为正值的子 SC

其中顺序是由远到近的,即 1 在最下层,7 在最上层。需要注意的是,划分堆叠次序时,子 SC 内的元素都是作为一个整体参与堆叠,也就是各个 SC 中的元素不会串台,比如两个定位元素 A 和 B,z-index 值分别为 1 和 2,则 B 在 A 之上,并且 B 的后代元素,也都在 A 的后代元素之上。即使 A 中的某个后代设置了 z-index 为 9999,也会被 B 以及其后代所遮挡。所以说堆叠上下文是进行堆叠的基本单位,只有搞定了这一概念,才能理解元素是如何堆叠的。每个 SC 就像是一层楼,后代元素都处在这层楼里,不管后代有多高的 z-index 值,一楼的元素也永远不会遮挡二楼三楼的元素。
阅读全文 »

半生熟 – 品冠 戴佩妮

品冠的声音听起来就是舒服啊,喜欢不多说。

JavaScript 闭包引起的内存泄漏(IE)

在 IE8 以及更早的版本中,由于两种垃圾收集算法并存,所以会发生循环引用的问题,引发内存泄漏,例如下面的代码:

function assignHandler() {
    var element = document.getElementById('someElement');
    element.onclick = function() {
        alert(element.id);
    };
}

以上代码中创建了一个匿名函数(闭包),并赋给 element 作为事件处理程序,因此 element 引用了这个匿名函数,而匿名函数中又引用了 element 对象,导致了循环引用,这两个对象被引用次数永远无法减少到 0,而由于老版本 IE 对 BOM 和 DOM 对象都采用引用计数的垃圾收集机制,所以这两个对象占用的内存就永远得不到回收。

可以通过改变代码的写法解决这个问题:
阅读全文 »

You Belong to Me – Carla Bruni

Carla Bruni,法国第一夫人,就是嫁给了萨科齐的那个……

这歌的歌词就几句,一直在不断地循环,不过我还是觉得很不错。

IE6 与 :hover 相关的一些 bug

IE6 的 :hover 伪类存在着一系列问题,简单记录:

只有 a 元素支持 :hover

这个想必是众所周知的,IE6 只能在 a 元素上使用 :hover,其他元素上无效。如果需要,可以通过 JavaScript 的 mouseovermouseout 事件来实现,或者 mouseentermouseleave,后一组事件是前一组的不冒泡版本。

:hover 规则不生效

假设如下的规则:

a span { color: green; }
a:hover span { color: red; }

在 IE6 中,第二条规则不会生效,鼠标指向 a 元素时,a 内的 span 不会变色。这是 IE6 的另一个 bug,如果某个链接没有定义 :hover 规则,直接定义 :hover 的子元素,那么子元素的样式不会生效。查看示例页面。解决办法是必须要定义 :hover,并加上一些特定的规则或造成样式上的改变,比如 padding:0,或 border:none,或 background:none 等。注意 a 元素必须要有 href 属性,否则 hover 也不会被触发。

/* 解决 */
a span { color: green; }
a:hover { padding:0; } /* 或 border:none  */
a:hover span { color: red; }

阅读全文 »

flight